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).

/* 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;

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.

Valeur initiale0
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

Syntaxe

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) (Oui) 7.0 4.0 2.0.2 (416)
Applicable à <table>[1] Pas de support (Oui) Pas de support Pas de support (Oui) Pas de support
max-content, min-content, fit-content, fill-available 24.0 -webkit [3] 3.0 (1.9) -moz [2] Pas de support Pas de support Pas de support Pas de support [3]
auto 21.0 [4] 16.0 (16.0) [4]
Retiré avec 22.0 (22.0)
Réintroduit dans 34.0 (34.0) où le comportement était celui spécifié.
? Pas de support 12.10 [6] Pas de support
auto comme valeur initiale 21.0 18.0 (18.0)
Removed in 22.0 (22.0)
? Pas de support 12.10 Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? (Oui) ? ? ?[5]
Applicable à <table>[1] ? ? ? Pas de support ? ? ?
max-content, min-content, fit-content, and fill-available ? ? ? Pas de support ? ? ?
auto ? ? ? ? ? ? ?
auto comme valeur initiale ? ? ? ? ? ? ?

[1] CSS 2.1 ne définissait pas, de façon explicite, le comportement de min-width pour <table>. Ainsi, n'importe quel comportement à cet égard est conforme à CSS 2.1. Les prochaines spécifications CSS pourront apporter une définition plus précises et il est donc conseillé aux auteurs de ne pas faire de suppositions.

[2] Gecko implémente de façon expérimentale les définitions données avec la spécification CSS3 sur les boîtes basiques (CSS3 Basic Box). Celle-ci définit les valeurs available et not fill-available. La définition de la valeur fit-content est également plus simple que celle de CSS3 Intrinsic.

[3] WebKit implémente également une ancienne version de la spécification avec le mot-clé intrinsic.

[4] Ces implémentations implémentaient un comportement légèrement plus simple pour ce mot-clé : il était calculé avec min-content sur les éléments flexibles et il était calculé à 0 sur le reste.

[5] Sur iOS, un élément button dans la configuration par défaut ne réagira pas à min-width. Cela est du aux boutons natifs. Si les règles de mise en forme obligent le navigateur à abandonner le contrôle natif, la propriété min-width prendra effet.

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,