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.

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

/* 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 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.
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), buggy before
Applicable à <table> [1] Pas de support (Oui) ? 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 [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) ? ? ?
Applicable à <table> [1] ? ? ? ? ? ? ?
max-content, min-content, fit-content, and fill-available ? ? ? ? ? ? ?
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.

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,