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 initialenone
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éenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéele pourcentage comme spécifié ou la longueur absolue ou le mot-clé none
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
max-widthChrome Support complet 1Edge Support complet 12Firefox 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 7Opera 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 1WebView Android Support complet 4.4Chrome Android Support complet 18Firefox 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 OuiSafari iOS Support complet 1Samsung 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 NonFirefox 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 NonOpera Support complet 44Safari 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 46Firefox 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 43Safari 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 NonFirefox 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 NonOpera Support complet 44Safari 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 46Firefox 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 43Safari 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 NonFirefox 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 NonOpera Support complet 44Safari 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 46Chrome Android Support complet 46Firefox 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 43Safari 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 NonFirefox Aucun support NonIE Aucun support NonOpera 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 NonWebView 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 NonOpera 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 NonSamsung 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.

Voir aussi