min-width

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 initiale	`0`
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ée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Média	visuel
Valeur calculée	le pourcentage tel que spécifé ou une longeur absolue
Animable	oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction `calc()` qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction `calc()` interpole chaque moitié comme un nombre réel.
Ordre canonique	l'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	Statut	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.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Support simple	1.0	1.0 (1.0)	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)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	?	?	?	?	?	?
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.