Propriété CSS min-width

La propriété min-width définit la largeur minimale d'un élément. Elle empêche la valeur de la propriété width de descendre en dessous de la valeur que vous attribuez à min-width, quelle que soit l'étroitesse de l'espace disponible.

Cette page explique ce que fait min-width, comment elle interagit avec width et max-width, les valeurs qu'elle accepte (y compris les mots-clés min-content, max-content et fit-content), ainsi que l'écueil courant avec Flexbox que min-width permet de résoudre.

Comment min-width interagit avec width et max-width

Lorsque vous utilisez min-width conjointement avec les propriétés width et max-width, min-width agit comme une borne inférieure. Le navigateur calcule la largeur, puis la contraint dans la plage min-width … max-width :

Si width est inférieure à min-width, l'élément est élargi à min-width.
Si width est supérieure à max-width, l'élément est rétréci à max-width.

Autrement dit, min-width l'emporte sur une width plus petite, et max-width l'emporte sur une min-width plus grande — min-width a toujours la priorité en cas de conflit entre les deux. C'est ce qui permet aux éléments de rester lisibles tout en étant réactifs : l'élément peut s'agrandir sur les écrans larges, mais ne se réduit jamais en dessous d'une taille utilisable.

Un usage courant consiste à empêcher une colonne, une carte ou un bouton de devenir trop étroit dans une mise en page Flexbox ou en grille, où les enfants se rétréciraient sinon pour s'adapter.

Info

Les valeurs de longueur négatives sont interdites — min-width n'accepte que 0 ou une longueur/un pourcentage positif.

Valeur initiale	0
S'applique à	Tous les éléments, à l'exception des éléments en ligne non remplacés, des lignes de tableau et des groupes de lignes.
Hérité	Non.
Animable	Oui. La largeur est animable.
Version	CSS2
Syntaxe DOM	object.style.minWidth = "200px";

Syntaxe

min-width: <length> | <percentage> | min-content | max-content | fit-content | auto | initial | inherit;

La propriété accepte une longueur CSS (px, pt, em, rem, etc.), un pourcentage du bloc conteneur, ou l'un des mots-clés de taille intrinsèque décrits dans le tableau Valeurs ci-dessous.

Exemples

Valeur en pourcentage

Lorsque min-width est un pourcentage, il est résolu par rapport à la largeur du bloc conteneur. Ici, width: 10px est ignorée car la min-width de 70% est plus grande, de sorte que l'élément est élargi à 70 % de son parent :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Essayez vous-même »

Résultat

Valeur de longueur fixe

Dans cet exemple, une min-width de 10cm est appliquée à un élément inline-block. Elle est comparée à un simple span dont la min-width est 0, afin que vous puissiez voir comment le plancher force la deuxième boîte à rester au moins à 10 cm de large, même si son texte est court :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Essayez vous-même »

L'écueil min-width: 0 avec Flexbox

Par défaut, un élément flex ne peut pas se rétrécir en dessous de la taille de son contenu — sa min-width implicite est auto, et non 0. C'est pourquoi les longs mots, les blocs de code ou les éléments <pre> à l'intérieur d'un conteneur flex peuvent déborder et étirer toute la mise en page au lieu de passer à la ligne ou de défiler.

La solution consiste à définir explicitement min-width: 0 sur l'élément flex afin qu'il soit autorisé à se rétrécir en dessous de la taille de son contenu :

.flex-item {
  min-width: 0; /* allow this item to shrink below its content width */
  overflow: hidden; /* or use overflow-x: auto for scrollable content */
}

Consultez overflow et flex pour en savoir plus sur la gestion du contenu rétréci.

Valeurs

Valeur	Description	Essayer
`length`	Définit une largeur minimale en `px`, `pt`, `cm`, `em`, etc. La valeur par défaut est `0`.	Essayer »
`%`	Définit la largeur minimale en pourcentage de la largeur de l'élément conteneur.	Essayer »
`min-content`	La plus petite largeur que le contenu peut prendre sans déborder (par ex. le mot le plus long).
`max-content`	La largeur que le contenu prendrait s'il ne passait jamais à la ligne.
`fit-content`	Utilise l'espace disponible, mais jamais plus que `max-content`.
`auto`	La valeur par défaut — se résout à `0` pour la plupart des éléments, mais à la taille du contenu pour les éléments flex.
`initial`	Applique la valeur par défaut de la propriété (`0`).	Essayer »
`inherit`	Hérite de la propriété depuis son élément parent.

Propriétés liées

width — définit la largeur préférée que min-width contraint.
max-width — définit la borne supérieure de la plage de largeur.
min-height — l'équivalent vertical de min-width.
box-sizing — contrôle si le rembourrage et les bordures sont inclus dans la largeur.

Pratique

Quelle est la fonctionnalité de la propriété 'min-width' en CSS ?

Elle permet de définir la largeur minimale d'un élémentElle permet de définir la largeur maximale d'un élémentElle permet de définir la hauteur minimale d'un élémentElle empêche les valeurs de la propriété 'width' de devenir inférieures à la valeur spécifiéeElle permet de faire pivoter un élément