Proprit CSS 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'lment sera la valeur de la proprit min-width si celle-ci est suprieure 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>

Dfinit la largeur minimale (min-width) comme une valeur absolue.

<percentage>

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

auto

La valeur par dfaut. La source de la valeur automatique pour l'lment dfini dpend de sa valeur d'affichage. Pour les botes de type bloc, les botes en ligne, les blocs en ligne et toutes les botes de mise en page de tableau, auto se rsout 0.

Pour les lments flexibles et les lments de grille, la valeur minimale de largeur est soit la taille suggre dfinie, comme la valeur de la proprit width, la taille transfre, calcule si l'lment a un aspect-ratio dfini et que la hauteur est une taille dfinie, sinon, la taille min-content est utilise. Si l'lment flexible ou de grille est un conteneur dfilant, ou si un lment 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) intrinsque prfre.

min-content

La largeur minimale (min-width) intrinsque 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>)

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

stretch

Limite la largeur minimale de la marge de la bote de l'lment la largeur de son bloc englobant. Elle tente de faire en sorte que la marge de la bote remplisse l'espace disponible dans le bloc englobant, se comportant ainsi de manire similaire 100%, mais en appliquant la taille rsultante la marge de la bote plutt qu' la bote dtermine par box-sizing.

Note : Pour vrifier les alias utiliss par les navigateurs pour la valeur stretch et son tat d'implmentation, consultez la section Compatibilit des navigateurs.

Dfinition 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-sum>      |
  <calc-size()>   |
  any             

<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

Dfinir la largeur minimale d'un lment

table {
  min-width: 75%;
}

form {
  min-width: 0;
}

Spcifications

Compatibilit des navigateurs

Voir aussi

• La proprit max-width
• La proprit width
• La proprit min-inline-size
• La proprit min-block-size
• La proprit box-sizing
• Le guide d'introduction au modle de bote CSS
• Le module du modle de bote CSS