min-width

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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

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"> Change the minimum width. </div> </section>

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

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,∞]> ) |
 <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

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 4 # sizing-values

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨1 nov. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content