Une carte qui ne doit jamais dépasser 400 pixels mais qui doit aussi pouvoir rétrécir sur mobile, un bouton dont la largeur doit épouser exactement son texte, une image qui ne doit jamais s'étirer au-delà de sa taille réelle : dimensionner un élément en CSS dépasse vite le simple couple width et height.
Trois outils s'articulent ensemble : des valeurs fixes, des bornes flexibles avec min et max, et des mots-clés intrinsèques qui laissent le contenu lui-même décider de la taille de sa boîte.
Définition
width et height fixent une dimension explicite. Les propriétés min-width, max-width, min-height et max-height ajoutent des bornes qui contraignent cette dimension sans la figer complètement, en laissant l'élément s'adapter entre deux limites.
.carte {
width: 100%;
min-width: 240px;
max-width: 400px;
}Cette carte occupe toute la largeur disponible, sans jamais descendre sous 240 pixels ni dépasser 400, quelle que soit la taille de l'écran.
Contraindre une taille avec min et max
| Propriété | Rôle | Usage courant |
|---|---|---|
max-width | Empêche de dépasser une largeur | Image responsive, colonne de texte lisible |
min-width | Empêche de descendre sous une largeur | Bouton qui ne doit jamais s'écraser |
max-height | Empêche de dépasser une hauteur | Zone de contenu avec défilement interne |
min-height | Empêche de descendre sous une hauteur | Section qui doit remplir l'écran même vide |
img {
max-width: 100%;
height: auto;
}Ce duo précis, presque un réflexe dans tout CSS reset et normalize, empêche une image de dépasser son conteneur tout en gardant ses proportions d'origine grâce à height: auto.
Le même duo s'applique à n'importe quel composant, pas seulement aux images : un bouton, une carte ou une zone de texte gagnent souvent à porter width: 100% associé à un max-width, pour occuper l'espace disponible sur mobile sans jamais s'étirer démesurément sur un grand écran.
Dimensionner par proportion avec aspect-ratio
Plutôt que de fixer une largeur et une hauteur séparément, aspect-ratio impose un ratio entre les deux : la hauteur se recalcule automatiquement dès que la largeur change, sans jamais avoir à connaître la taille finale à l'avance.
.video {
width: 100%;
aspect-ratio: 16 / 9;
}Les mots-clés intrinsèques
Trois valeurs de width, moins connues, laissent le contenu décider lui-même de sa taille plutôt que d'imposer un nombre fixe.
| Valeur | Comportement |
|---|---|
min-content | La largeur la plus petite possible sans provoquer de débordement, souvent celle du mot le plus long |
max-content | La largeur que prendrait le contenu sans jamais retourner à la ligne |
fit-content | S'adapte au contenu, mais ne dépasse jamais l'espace réellement disponible |
.etiquette {
width: fit-content;
padding: 4px 12px;
}Cette étiquette prend exactement la largeur de son texte, jamais plus, contrairement à un élément de bloc classique qui s'étirerait sur toute la largeur disponible par défaut.
Le piège du min-width automatique en flexbox et en grid
Un enfant de Flexbox ou de grille reçoit par défaut min-width: auto, ce qui l'empêche de rétrécir sous la taille de son contenu, même si son parent lui impose une largeur plus étroite avec overflow défini.
C'est la cause la plus fréquente d'un texte qui déborde silencieusement d'une ligne flexible malgré un overflow: hidden posé sur le parent. La correction tient en une ligne, min-width: 0 sur l'enfant concerné, qui autorise enfin la boîte à rétrécir en dessous de la taille de son contenu.
Questions fréquentes
Quelle est la différence entre max-width et width ?
width fixe une largeur, que le conteneur soit assez grand ou non. max-width fixe un plafond que l'élément ne dépassera jamais, tout en le laissant rétrécir librement en dessous, ce qui la rend bien plus adaptée à un site responsive.
Pourquoi mon texte déborde-t-il d'une colonne flexible malgré overflow: hidden ?
Parce que les enfants d'un conteneur flexible ont min-width: auto par défaut, ce qui les empêche de rétrécir sous la taille de leur contenu. Ajouter min-width: 0 sur l'enfant débloque le rétrécissement et laisse enfin overflow faire son travail.
fit-content et max-content, quelle différence concrète ?
max-content ignore totalement l'espace disponible et peut déborder de son conteneur. fit-content applique la même logique mais s'arrête à la limite de l'espace réellement disponible, un comportement presque toujours plus sûr en pratique.