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

BCD tables only load in the browser