min-width

Exemple interactif

min-width: 150px;

min-width: 20em;

min-width: 75%;

min-width: 40ch;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Changer la largeur minimale.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: white;
}

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 type <length> */
min-width: 3.5em;

/* Valeurs de type <percentage> */
min-width: 10%;

/* Valeurs avec un mot-clé */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fit-content(20em);
min-width: stretch;

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

Valeurs

<length>

Définit la largeur minimale (min-width) comme une valeur absolue.

<percentage>

Définit la largeur minimale (min-width) comme un pourcentage de la largeur du bloc englobant.

auto

La valeur par défaut. La source de la valeur automatique pour l'élément défini dépend de sa valeur d'affichage. Pour les boîtes de type bloc, les boîtes en ligne, les blocs en ligne et toutes les boîtes de mise en page de tableau, auto se résout à 0.

Pour les éléments flexibles et les éléments de grille, la valeur minimale de largeur est soit la taille suggérée définie, comme la valeur de la propriété width, la taille transférée, calculée si l'élément a un aspect-ratio défini et que la hauteur est une taille définie, sinon, la taille min-content est utilisée. Si l'élément flexible ou de grille est un conteneur défilant, ou si un élément de grille s'étend sur plus d'une piste de colonne flexible, la taille minimale automatique est 0.

max-content

La largeur minimale (min-width) intrinsèque préférée.

min-content

La largeur minimale (min-width) intrinsèque minimale.

fit-content

Utilise l'espace disponible, mais pas plus que max-content, c'est-à-dire min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>) Expérimental

Utilise la formule fit-content avec l'espace disponible remplacé par l'argument défini, c'est-à-dire min(max-content, max(min-content, argument)).

stretch

Limite la largeur minimale de la marge de la boîte de l'élément à la largeur de son bloc englobant. Elle tente de faire en sorte que la marge de la boîte remplisse l'espace disponible dans le bloc englobant, se comportant ainsi de manière similaire à 100%, mais en appliquant la taille résultante à la marge de la boîte plutôt qu'à la boîte déterminée par box-sizing.

Note : Pour vérifier les alias utilisés par les navigateurs pour la valeur stretch et son état d'implémentation, consultez la section Compatibilité des navigateurs.

Définition formelle

Syntaxe formelle

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

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Exemples

Définir la largeur minimale d'un élément

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété max-width
• La propriété width
• La propriété min-inline-size
• La propriété min-block-size
• La propriété box-sizing
• Le guide d'introduction au modèle de boîte CSS
• Le module du modèle de boîte CSS