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 Aucun support Non

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

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, Sebastianz, teoli, FredB, Mgjbot, BenoitL, Fredchat
Dernière mise à jour par : SphinxKnight,