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

<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 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
Média	visuel
Valeur calculée	le pourcentage tel que spécifé ou une longeur absolue
Type d'animation	une longueur, pourcentage ou calc() ;
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

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 37	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 Oui	Safari iOS Support complet 1	Samsung Internet Android Support complet 1.0
`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 Aucun support Non	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 15 Préfixée 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 Oui 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 ?	Safari iOS ?	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- Support complet 25 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `min-intrinsic`	Edge Aucun support Non	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 44	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 Oui 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 43	Safari iOS ?	Samsung Internet Android Support complet 5.0
`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 Aucun support Non	Firefox Aucun support Non	IE Aucun support Non	Opera Aucun support Non	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 ?	Safari iOS ?	Samsung Internet Android ?
`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 Aucun support Non	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 15 Préfixée Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet Oui Support complet Oui Support complet 6.1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `-webkit-fill-available`	WebView Android Support complet 46 Support complet 46 Support complet Oui 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 ?	Safari iOS ?	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`
`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 ?	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é 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.

min-width

Syntaxe

Valeurs

Syntaxe formelle

Exemples

HTML

CSS

Résultat

Spécifications

Compatibilité des navigateurs

Légende

Voir aussi

Étiquettes et contributeurs liés au document

Sondage MDN

min-width

Syntaxe

Valeurs

Syntaxe formelle

Exemples

HTML

CSS

Résultat

Spécifications

Compatibilité des navigateurs

Légende

Voir aussi

Étiquettes et contributeurs liés au document

Recevez le meilleur du développement web

Merci ! Veuillez vérifier votre boîte de réception afin de confirmer votre inscription.