max-height

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS max-height définit la hauteur maximale d'un élément. Elle empêche la valeur utilisée de la propriété height de devenir supérieure à la valeur définie pour max-height.

Exemple interactif

max-height: 150px;

max-height: 7em;

max-height: 75%;

max-height: 10px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte où vous pouvez changer la hauteur maximale. <br />Cela
    limitera la hauteur de la boîte, pouvant provoquer un débordement.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: white;
}

La valeur de max-height surcharge la valeur de height mais elle est surchargée par min-height.

Syntaxe

css

/* Valeur de type <length> */
max-height: 3.5em;
max-height: anchor-size(height);
max-height: calc(anchor-size(--my-anchor self-block, 250px) + 2em);

/* Valeurs de type <percentage> */
max-height: 75%;

/* Valeurs avec un mot-clé */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fit-content(20em);
max-height: stretch;

/* Valeurs globales */
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: revert-layer;
max-height: unset;

Valeurs

<length>: Définit la hauteur maximale (max-height) comme une valeur absolue.
<percentage>: Définit la hauteur maximale (max-height) comme un pourcentage de la hauteur du bloc englobant.
none: Aucune limite à la taille de la boîte.
max-content: La hauteur maximale (max-height) intrinsèque préférée.
min-content: La hauteur maximale (max-height) intrinsèque minimale.
fit-content: Utilise l'espace disponible, mais pas plus que max-content, c'est-à-dire min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>) Expérimental: Utilise la formule fit-content avec l'espace disponible remplacé par l'argument défini, c'est-à-dire min(max-content, max(min-content, argument)).
stretch: Limite la hauteur maximale de la marge de la boîte de l'élément à la hauteur de son bloc englobant. Elle tente de faire en sorte que la marge de la boîte remplisse l'espace disponible dans le bloc englobant, se comportant ainsi de manière similaire à 100% mais en appliquant la taille résultante à la marge de la boîte plutôt qu'à la boîte déterminée par box-sizing.

Note : Pour vérifier les alias utilisés par les navigateurs pour la valeur stretch et son état d'implémentation, consultez la section Compatibilité des navigateurs.

Accessibilité

Assurez-vous que les éléments définis avec une max-height ne sont pas tronqués et/ou ne masquent pas d'autres contenus lorsque la page est zoomée pour augmenter la taille du texte.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes
Héritée	non
Pourcentages	Le pourcentage est par rapport à la hauteur de la boîte générée par le bloc contenant. Si la hauteur du bloc contenant n'est pas explicitement définie (c'est-à-dire qu'elle dépend de la hauteur du contenu), et si cet élément n'est pas absolument positionné, la valeur du pourcentage est traitée comme si elle valait `none`.
Valeur calculée	le pourcentage comme défini ou la longueur absolue ou le mot-clé `none`
Type d'animation	une longueur, pourcentage ou calc() ;

Syntaxe formelle

max-height = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Exemples

Définir la hauteur maximale en utilisant des valeurs en pourcentage et des mots-clés

css

table {
  max-height: 75%;
}

form {
  max-height: none;
}

Spécifications

Spécification
CSS Box Sizing Module Level 4 # sizing-values

Compatibilité des navigateurs

Voir aussi

La propriété min-height
La propriété height
La propriété max-inline-size
La propriété max-block-size
La propriété box-sizing
Le guide d'introduction au modèle de boîte CSS
Le module du modèle de boîte CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 20 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu