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

Une solution "purement" css est en fait possible maintenant grâce aux media queries :

.yourselector {
  max-width: calc(100% - 80px);
}

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

Answer 2

Non, vous ne pouvez pas. max() y min() ont été supprimés de CSS3 Values and Units. Elles peuvent être réintroduit dans CSS4 Valeurs et unités cependant. Il n'y a actuellement aucune spécification pour eux, et la calc() ne mentionne pas que l'un ou l'autre sont valides à l'intérieur d'un calc() fonction.

Answer 3

min() , max() et clamp() sont enfin disponibles !

La prise en charge commence dans Firefox 75, Chrome 79 et Safari 11.1 ( clamp est disponible dans Safari 13.1).

min() y max() prend un nombre quelconque d'arguments.

clamp() a une syntaxe clamp(MIN, VAL, MAX) et est équivalent à max(MIN, min(VAL, MAX)) .

min() y max() peuvent être imbriqués. Ils peuvent être utilisés dans calc() ainsi qu'à l'extérieur de celui-ci, ils peuvent également contenir des expressions mathématiques, ce qui signifie que vous pouvez éviter calc() lors de leur utilisation.

Par conséquent, l'exemple original peut être écrit comme suit :

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

Answer 4

Une solution de contournement serait d'utiliser width lui-même.

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

Answer 5

Alors que Réponse de @david-mangold ci-dessus était "proche", c'était incorrect.
(Vous peut utilisez sa solution si vous voulez un minimum au lieu d'une maximum largeur).

Cette solution démontre que le commentaire de @gert-sønderby à cette réponse fait travail :
La réponse aurait dû utiliser min-width pas max-width .

C'est ce qu'il aurait dû dire :

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

Oui, utilisez largeur minimale plus largeur pour émuler un max() fonction.

Voici le codepen (il est plus facile de voir la démo sur CodePen, et vous pouvez la modifier pour vos propres tests).

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

Cela dit, Réponse d'@andy ci-dessus peut être plus facile à raisonner, et peut être plus approprié dans de nombreux cas d'utilisation.

Notez également que éventuellement a max() et un min() pourrait être introduite dans CSS, mais en avril 2019, elle ne fait pas partie de la spécification.

• Ici, vous pouvez vérifier max() Compatibilité avec les navigateurs :
  https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility .

• Voici l'ébauche de la proposition :
  https://drafts.csswg.org/css-values-4/#comp-func .
  Faites défiler vers le haut de la page pour voir la date de la dernière révision (À ce jour, elle a été révisée pour la dernière fois le 5 avril 2019).