min-width

La propriété CSS min-width est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur utilisée de la propriété width de devenir inférieure à la valeur spécifiée par min-width.

Exemple interactif

La largeur de l'élément sera la valeur de la propriété min-width si celle-ci est supérieure à max-width ou à width.

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(20em);

/* Valeurs globales */
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;

Valeurs

<length>

La largeur minimale sous la forme d'une valeur absolue. Une largeur négative rendra la déclaration invalide.

<percentage>

La largeur minimale, exprimée comme une fraction de la largeur du bloc englobant. Les valeurs négatives rendront la déclaration invalide.

auto

Le navigateur calculera et sélectionnera une valeur de min-width pour l'élément ciblé.

max-content

La valeur intrinsèque préférée pour min-width.

min-content

La valeur intrinsèque minimale pour min-width.

fit-content(<length-percentage>)

Utilise la formule fit-content avec le maximum d'espace disponible remplacé par l'argument indiqué, c'est-à-dire min(max-content, max(min-content, argument)). Voir <length-percentage> pour le type de valeur qui peut être utilisée en argument.

Définition formelle

Valeur initialeauto
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
Valeur calculéele pourcentage tel que spécifié ou une longueur absolue
Type d'animationune longueur, pourcentage ou calc() ;

Syntaxe formelle

min-width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<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: 200px;
  border: solid 1px red;
}

p {
  min-width: 250px;
  border: solid 1px blue;
}

Résultat

Spécifications

Specification
CSS Box Sizing Module Level 3
# min-size-properties

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi