Calcul de max ou max de calc en CSS

Non tu ne peux pas. max() et min() ont été supprimés des valeurs et des unités CSS3. Ils peuvent toutefois être réintroduits dans les valeurs et les unités CSS4 . Il n’y a actuellement aucune spécification pour eux, et la spécification calc() ne mentionne pas non plus qu’elles sont valides dans une fonction calc() .

Une solution css «pure» est actuellement possible en utilisant les requêtes média:

 .yourselector { max-width: calc(100% - 80px); } @media screen and (max-width: 500px) { .yourselector { max-width: 500px; } } 

Une solution serait d’utiliser la width elle-même.

 max-width: 500px; width: calc(100% - 80px); 

@Amaud Y a-t-il une alternative pour avoir le même résultat?

Il existe une approche non-purement CSS qui aboutirait à des résultats similaires. Vous devrez ajuster le remplissage / la marge du conteneur des éléments parents.

 .parent { padding: 0 50px 0 0; width: calc(50%-50px); background-color: #000; } .parent .child { max-width:100%; height:50px; background-color: #999; }