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.

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: Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..
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

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)où 
<length-percentage> = <length> | <percentage>

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 Box 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 initiale	`auto`
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
Valeur calculée	le pourcentage tel que spécifé ou une longeur absolue
Type d'animation	une longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`min-width`	Chrome Support complet 1	Edge Support complet 12	Firefox 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 7	Opera 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 1	WebView Android Support complet 4.4	Chrome Android Support complet 18	Firefox Android Support complet 4 Notes Support complet 4 Notes Notes CSS 2.1 leaves the behavior of `min-width` with `table` undefined. Firefox supports applying `min-width` to `table` elements.	Opera Android Support complet 14	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
`auto`	Chrome 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 Non	Opera Support complet 12.1 Notes Support complet 12.1 Notes Notes Opera uses `auto` as the initial value for `min-width`.	Safari Aucun support Non	WebView Android Support complet 37 Notes Support complet 37 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Chrome Android Support complet 25 Notes Support complet 25 Notes Notes Chrome uses `auto` as the initial value for `min-width`.	Firefox Android 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`.	Opera Android Support complet 14 Notes Support complet 14 Notes Notes Opera uses `auto` as the initial value for `min-width`.	Safari iOS Aucun support Non	Samsung Internet Android Support complet 1.5 Notes Support complet 1.5 Notes Notes Samsung Internet uses `auto` as the initial value for `min-width`.
`fit-content`	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 Support complet 79 Support complet 79 Support complet 79 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox 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 Non	Opera Support complet 33 Support complet 33 Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet 11 Support complet 11 Support complet 6.1 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	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 46	Firefox Android Support complet 4 Préfixée Notes Support complet 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 33	Safari iOS Support complet 11 Support complet 11 Support complet 7 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android Support complet 5.0 Autre nom Support complet 5.0 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`
`max-content`	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 Support complet 79 Support complet 79 Support complet 79 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox 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 Non	Opera Support complet 33 Support complet 33 Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet 11 Support complet 11 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 46	Firefox 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 33	Safari iOS Support complet 11 Support complet 11 Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `intrinsic`	Samsung Internet Android Support complet 5.0
`min-content`	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- Aucun support 25 — 48 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Edge Support complet 79 Support complet 79 Support complet 79 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox 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 Non	Opera Support complet 33 Support complet 33 Support complet ≤15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support ≤15 — 35 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Safari Support complet 11 Support complet 11 Support complet 2 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-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- Aucun support ≤37 — 48 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Chrome Android Support complet 46 Support complet 46 Support complet 25 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support 25 — 48 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Firefox 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 33 Support complet 33 Support complet ≤14 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support ≤14 — 35 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Safari iOS Support complet 11 Support complet 11 Support complet 1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Samsung Internet Android Support complet 5.0 Support complet 5.0 Support complet 1.5 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Aucun support 1.5 — 5.0 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`
`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 Support complet 79 Autre nom Support complet 79 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	Firefox Aucun support Non	IE Aucun support Non	Opera 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 Non	WebView 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 Non	Opera 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 Non	Samsung Internet Android Support complet 1.5 Autre nom Support complet 1.5 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`

Légende

Support complet: Support complet
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.