Calc de max, ou max de calc en CSS

Question

Est-il possible de faire quelque chose comme ceci

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

o

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

en CSS ?

Answer 1

Changement max a Max vous verrez la magie sale

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

Answer 2

@Amaud Existe-t-il une alternative pour obtenir le même résultat ?

Il existe une approche purement css sans js qui permettrait d'obtenir des résultats similaires. Vous devrez ajuster le padding/margin 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;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 3

Ceci n'est supporté que dans dart-sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max .

Vous pouvez également utiliser l'interpolation de chaînes (similaire aux variables CSS) pour que cela fonctionne en dehors de dart-sass.

max-width: #{"max(500px, calc(100% - 80px))"}