max-width - CSS : Feuilles de style en cascade

La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété width de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).

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

Syntaxe

/* Valeur de longueur */
/* Type <length>      */
max-width: 3.5em;

/* Valeurs relatives */
/* Type <percentage> */
max-width: 10%;

/* Valeurs avec un mot-clé */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Valeurs globales */
max-width: inherit;
max-width: initial;
max-width: unset;

Valeurs

<length>: La largeur minimale fixée. Voir <length> pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
<percentage>: La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page <percentage> sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
fill-available: La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom : available.
fit-content: Un synonyme pour max-content.
max-content: La largeur intrinsèque préférée.
min-content: La largeur intrinsèque minimale.
none: Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.

Syntaxe formelle

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)où 
<length-percentage> = <length> | <percentage>

Exemples

Exemple simple avec un tableau

HTML

<div> Lorem ipsum tralala sit amet, consectetur adipisicing
  <p>
     Ut enim ad minim veniam, quis nostrud exercitation
     ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

CSS

div {
  width: 250px;
  border: solid 1px red;
}

p {
  max-width: 60%;
  border: solid 1px blue;
}

Résultat

Accessibilité

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-width ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

Spécifications

Spécification	État	Commentaires
CSS Box Sizing Module Level 3 La définition de 'max-width' dans cette spécification.	Version de travail	Ajout des mots-clés `max-content`, `min-content`, `fit-content` et `fill-available`. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.
CSS Transitions La définition de 'max-width' dans cette spécification.	Version de travail	`max-width` peut désormais être animée.
CSS Level 2 (Revision 1) La définition de 'max-width' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`none`
Applicabilité	tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	le pourcentage comme spécifié ou la longueur absolue ou le mot-clé `none`
Type d'animation	une longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

BCD tables only load in the browser