web-dev-qa-db-fra.com

Calc de max ou max de calc en CSS

Est-il possible de faire quelque chose comme ça

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

ou

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

en CSS?

csscss3
88
Arnaud

Non vous ne pouvez pas. max() et min() ont été supprimés de CSS3 Values ​​and Units. Ils peuvent être réintroduits dans les valeurs et unités de CSS4 cependant. Il n'y a actuellement aucune spécification pour eux, et la spécification calc() ne mentionne pas que l'un ou l'autre est valable dans une fonction calc().

79
David Storey

Une solution CSS «pure» est en réalité possible maintenant en utilisant des requêtes de médias:

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

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

Une solution de contournement consisterait à utiliser width lui-même.

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

Alors que la réponse de @ david-mangold ci-dessus , était "proche", elle était incorrecte.
(Vous pouvez utilisez sa solution si vous souhaitez une largeur minimale, au lieu de maximale largeur).

Cette solution démontre que @ gert-sønderby commente cette réponse ne fonctionne:
La réponse aurait dû utiliser min-width, pas max-width.

Voici ce qu'il aurait dû dire:

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

Oui, utilisez min-width plus largeur pour émuler une fonction max () .

Voici le codepen (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, la réponse de @ andy ci-dessus est peut-être plus facile à raisonner et peut-être plus appropriée dans de nombreux cas d'utilisation.

Notez également que éventuellement une fonction max() et une fonction min() peuvent être introduites dans CSS, mais à partir d'avril 2019, elles ne font pas partie des spécifications.

0
SherylHohman

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

Il existe une approche non css pure qui permet d’obtenir des résultats similaires. Vous devez ajuster le remplissage/la marge du conteneur d’é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>

0
Jicub