Calc de max, ou max de calc en CSS

122

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?

css

— Arnaud
source

Les avez-vous essayés vous-même?

— Kyle G.17

5

Comme @ gert-sønderby l'a dit, utilisez simplement ces deux: min-width: 500px; largeur: calc (100% - 80px);

— paulie4

11

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

À partir de Firefox 75, Chrome 79 et Safari 11.1 (sauf clamp).

min()et max()prenez n'importe quel nombre d'arguments.

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

min()et max()peut être imbriqué. Ils peuvent être utilisés à l' calc()intérieur comme à l'extérieur de celui-ci, ils peuvent également contenir des expressions mathématiques, ce qui signifie que vous pouvez les éviter calc()lorsque vous les utilisez.

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

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

— utilisateur
source

1

Pour ce que ça vaut, MS Edge pour macOS (version 81.0.416.68) les autorise également. On pourrait supposer que la version Windows fonctionne également. Je ne connais pas la version mini prise en charge.

— jhelzer

1

Le nouveau Edge est essentiellement Chrome, ses versions suivent celle de Chrome. Les données complètes de compatibilité du navigateur se trouvent à la fin des pages liées.

— utilisateur

115

Une solution css `` pure '' est en fait possible maintenant en utilisant des requêtes multimédias:

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

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

— Andy
source

3

Excellente solution! Je l'ai utilisé en fait pour la hauteur max-height

— minimale

102

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

— David Storey
source

1

Vous pouvez utiliser JavaScript pour obtenir le style calculé (en fait le style utilisé) de l'élément. Supprimez-en 80px et comparez-le à 500 pour voir lequel est le plus grand. Quelque chose comme var val = parseInt (window.getComputedStyle (el, null) .getPropertyValue ("width")) - 80) pour obtenir la largeur - 80 et el.style.maxWidth pour définir la largeur maximale.

— David Storey

10

Je vous remercie. Cependant, je préférerais une solution CSS pure.

— Arnaud

41

Chaque fois qu'il y a une question CSS et qu'une réponse commence par "Vous pouvez utiliser JavaScript", c'est incorrect. Il existe de nombreuses raisons valables de vouloir conserver tout le code de présentation en CSS. Tous - pas la plupart.

— b264

8

Il semble que min () et max () soient de retour dans le module Valeurs et unités CSS Niveau 4 (Ébauche de l'éditeur, 1er septembre 2017) Lien: drafts.csswg.org/css-values/#calc-notation

— Jakob E

5

MAIS il y a une solution au problème, continuez à faire défiler jusqu'à @andy réponse ci

— Offirmo

44

Une solution de contournement serait de widths'utiliser.

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

— David Mangold
source

3

C'est une bonne idée, mais si je comprends bien la question de @ Arnaud, il veut la largeur maximale de l'un 500pxou l' autre 100% - 80px. Votre solution limite la largeur maximale 500pxmême si elle 100% - 80pxest plus grande.

— Theophilus

2

Mais c'est la même chose que l'utilisation min()donc peut-être utile aux autres.

— Seika85

17

Il me semble que l'utilisation de min-width au lieu de max-width dans l'exemple ci-dessus pourrait être un équivalent du comportement demandé, cependant.

— Gert Sønderby le

1

La réponse m'a aidé à ajouter une marge à un conteneur flexible une fois que la largeur de la page est devenue petite. codepen.io/OBS/pen/wGrRJV

— ofer.sheffer

J'ai posté une solution démontrant que le commentaire de @ GertSønderby est en effet la bonne solution.

— SherylHohman

13

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

Cette solution démontre que @ gert-Sønderby commentaire à cette réponse ne travail:
La réponse aurait dû utiliser min-width, non max-width.

Voici ce qu'il aurait dû dire:

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

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

Voici le codepen (plus facile de voir la démo sur CodePen, et vous pouvez le 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>

Développer l'extrait

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

Notez également que finalement une fonction max()et une min()fonction peuvent être introduites dans CSS, mais qu'en avril 2019, elles ne font pas partie de la spécification.

Ici, vous pouvez vérifier la max()compatibilité du navigateur:
https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility .
Voici le brouillon de la proposition:
https://drafts.csswg.org/css-values-4/#comp-func .
Faites défiler vers le haut de la page pour voir la dernière date de révision (à partir d'aujourd'hui, elle a été révisée pour la dernière fois le 5 avril 2019).

— SherylHohman
source

1

Pourquoi le vote négatif? Tout ce qui est indiqué est correct et toutes les sources ont été liées et créditées.

— SherylHohman

1

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

Il existe une approche css pure non-js qui permettrait d'obtenir 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;
}

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

Développer l'extrait

— Jicub
source