CSS : min-width / max-width / min-height / max-height

Description

Ces quatre propriétés permettent de définir des limites de taille pour un élément HTML, aussi bien en largeur qu’en hauteur.

Elles sont essentielles pour créer des mises en page souples, qui s’adaptent au contenu sans se déformer ou dépasser de l’écran.

min-width : largeur minimale
max-width : largeur maximale
min-height : hauteur minimale
max-height : hauteur maximale

Le principe est donc de dimensionner un élément normalement avec width et/ou height en pourcentage puis d’ajouter des bornes pour limiter les tailles maximales/minimales.

Par exemple, le contenu d’un article pourrait avoir une largeur width: 100% avec une largeur maximale max-width: 960px pour éviter d’avoir des lignes trop longues difficiles à lire. Les paragraphes s’adapteront à la largeur de la fenêtre du navigateur sans être excessivement longues sur un écran large.

Ces propriétés ne fixent donc pas une taille précise : elles définissent une fourchette autorisée. Tant que le contenu reste dans cette fourchette, l’élément peut s’agrandir ou se réduire librement.

Contrairement à width ou height, elles ne coupent jamais le contenu.

max-width: 100%; pour empêcher une image de dépasser du conteneur.

min-height: 100vh; pour une section pleine hauteur.

Valeurs possible

Les quatre propriétés acceptent les mêmes types de valeurs :

Type	Exemples	Description
Pixels	`200px`	Valeur fixe, simple et fiable.
Pourcentage	`50%`	Relatif au parent (nécessite parfois que le parent ait une hauteur/largeur définie).
Viewport	`100vh`, `50vw`	Relatif à la fenêtre. Très utilisé pour les sections pleine hauteur.
Auto	`min-height: auto;`	Valeur par défaut : aucune contrainte minimale ou maximale.

Exemples

<div class="limites">Bloc avec limites</div>

<div class="limites">Bloc avec limites</div>

.limites {
    min-width: 200px;
    max-width: 420px;
    min-height: 80px;
    max-height: 160px;
    background-color: lightcoral;
    padding: 10px;
    border: 1px solid #333;
}

.limites {    min-width: 200px;    max-width: 420px;    min-height: 80px;    max-height: 160px;    background-color: lightcoral;    padding: 10px;    border: 1px solid #333;}

Aperçu du résultat

Bloc avec limites de largeur et hauteur

Remarques

max-width est très utilisé pour empêcher un texte ou une image de prendre toute la largeur d’un écran large.
min-height est idéal pour assurer une cohérence visuelle entre plusieurs blocs de contenu.
Les valeurs en pourcentage exigent souvent que le parent ait une dimension définie.
Combiner min-* + max-* crée une mise en page très flexible et robuste.