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


```css
/\* 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 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écifié ou une longueur absolue |
| Type d'animation | une 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


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


```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 |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `width`
* `max-width`
* `min-height`
* `box-sizing`
* Le modèle de boîtes (en-US)