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

La valeur de min-width surcharge les valeurs de max-width et de width si elle est supérieure à l'une de ces propriétés.

Syntaxe

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

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

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

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

Valeurs

<length>
La largeur minimale. Voir <length> pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.
<percentage>
La largeur minimale, 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.
auto
La taille minimale par défaut pour les éléments flexibles. Elle fournit une valeur par défaut « raisonnable » (autre que 0) pour les autres dispositions.
max-content
La largeur intrinsèque préférée.
min-content
La largeur intrinsèque minimale.
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
La largeur calculée par min(max-content, max(min-content, fill-available)).

Syntaxe formelle

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

Exemples

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

Spécifications

Spécification État Commentaires
CSS Intrinsic & Extrinsic Sizing Module Level 3
La définition de 'min-width' dans cette spécification.
Version de travail Ajout des mots-clés max-content, min-content, fit-content et fill-available.
CSS Flexible Box Layout Module
La définition de 'min-width' dans cette spécification.
Candidat au statut de recommandation Ajout du mot-clé auto qui est utilisé comme valeur initiale.
CSS Transitions
La définition de 'min-width' dans cette spécification.
Version de travail min-width peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'min-width' dans cette spécification.
Recommendation Définition initiale.

Valeur initialeauto
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 tel que spécifé ou une longeur absolue
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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
IE Support complet 7Opera Support complet 4
Notes
Support complet 4
Notes
Notes CSS 2.1 leaves the behavior of min-width with table undefined. Opera supports applying min-width to table elements.
Safari Support complet 2WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fit-content, max-content, and min-content
Expérimentale
Chrome Support complet 24
Préfixée
Support complet 24
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Support complet 3
Préfixée Notes
Support complet 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 Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fill-available
Expérimentale
Chrome Support complet 24
Préfixée
Support complet 24
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
autoChrome Support complet 21
Notes
Support complet 21
Notes
Notes Chrome uses auto as the initial value for min-width.
Edge Support complet 12
Notes
Support complet 12
Notes
Notes Edge uses auto as the initial value for min-width.
Firefox Support complet 34
Support complet 34
Aucun support 16 — 22
Notes
Notes Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
IE Aucun support NonOpera Support complet 12.1
Notes
Support complet 12.1
Notes
Notes Opera uses auto as the initial value for min-width.
Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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é 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, Sebastianz, teoli, FredB, Mgjbot, BenoitL, Fredchat
Dernière mise à jour par : SphinxKnight,