max-width

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

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

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 Intrinsic & Extrinsic 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
Média	visuel
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() ;
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`max-width`	Chrome Support complet 1	Edge Support complet 12	Firefox Support complet 1 Notes Support complet 1 Notes Notes CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.	IE Support complet 7	Opera Support complet 4 Notes Support complet 4 Notes Notes CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Opera supports applying `max-width` to `table` elements.	Safari Support complet 1	WebView Android Support complet 4.4	Chrome Android Support complet 18	Firefox Android Support complet 4 Notes Support complet 4 Notes Notes CSS 2.1 leaves the behavior of `max-width` with `table` undefined. Firefox supports applying `max-width` to `table` elements.	Opera Android Support complet Oui	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
`fit-content` Expérimentale	Chrome Support complet 46 Support complet 46 Support complet 25 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Aucun support Non	Firefox Support partiel 3 Préfixée Notes Support partiel 3 Préfixée Notes Préfixée Nécessite l'utilisation d'un préfixe : -moz- Notes Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	IE Aucun support Non	Opera Support complet 44	Safari Support complet 6.1 Préfixée Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 2 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	WebView Android Support complet 46 Support complet 46 Support complet ≤37 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 46	Firefox Android Support partiel 4 Préfixée Notes Support partiel 4 Préfixée Notes Préfixée Nécessite l'utilisation d'un préfixe : -moz- Notes Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.	Opera Android Support complet 43	Safari iOS Support complet 7 Préfixée Support complet 7 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	Samsung Internet Android Support complet 5.0
`max-content` Expérimentale	Chrome Support complet 46 Support complet 46 Support complet 22 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Aucun support Non	Firefox Support complet 66 Support complet 66 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 6.1 Préfixée Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 2 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	WebView Android Support complet 46 Support complet 46 Support complet ≤37 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 46	Firefox Android Support complet 66 Support complet 66 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 7 Préfixée Support complet 7 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	Samsung Internet Android Support complet 5.0
`min-content` Expérimentale	Chrome Support complet 46 Support complet 46 Support complet 25 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Aucun support Non	Firefox Support complet 66 Support complet 66 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	IE Aucun support Non	Opera Support complet 44	Safari Support complet 6.1 Préfixée Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 2 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	WebView Android Support complet 46	Chrome Android Support complet 46	Firefox Android Support complet 66 Support complet 66 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz-	Opera Android Support complet 43	Safari iOS Support complet 7 Préfixée Support complet 7 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	Samsung Internet Android Support complet 5.0
`stretch` Expérimentale	Chrome Support complet 22 Autre nom Support complet 22 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Edge Aucun support Non	Firefox Aucun support Non	IE Aucun support Non	Opera Support complet 15 Autre nom Support complet 15 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Safari Aucun support Non	WebView Android Support complet 4.4 Autre nom Support complet 4.4 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Chrome Android Support complet 25 Autre nom Support complet 25 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Firefox Android Aucun support Non	Opera Android Support complet 14 Autre nom Support complet 14 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Safari iOS Aucun support Non	Samsung Internet Android Support complet 1.5 Autre nom Support complet 1.5 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`

Légende

Support complet: Support complet
Support partiel: Support partiel
Aucun support: Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.: Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.: Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.: Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.