min-content

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 janvier 2020.

Le mot-clé de dimensionnementmin-content représente lataille intrinsèque minimale d'un élément.Ce mot-clé réduit l'élément à la plus petite taille possible sans provoquer de dépassement évitable de son contenu.Pour le contenu textuel, ce mot-clé force le retour à la ligne à chaque opportunité (comme les espaces entre les mots), et l'élément sera seulement aussi large que le mot le plus long.

La propriétéinterpolate-size et la fonctioncalc-size() peuvent être utilisées pour permettre des animations vers et depuismin-content.

Syntaxe

css

/* Utilisé comme valeur de longueur */width: min-content;inline-size: min-content;height: min-content;block-size: min-content;/* Utilisé dans les pistes de grille */grid-template-columns: 200px 1fr min-content;

Exemples

Dimensionner des boîtes avec`min-content`

HTML

html

<div>Élément</div><div>Élément avec plus de texte.</div>

CSS

css

.item {  width: min-content;  background-color: #8ca0ff;  padding: 5px;  margin-bottom: 1em;}

Résultat

Dimensionner des colonnes de grille avec`min-content`

HTML

html

<div>  <div>Élément</div>  <div>Élément avec plus de texte.</div>  <div>Élément flexible</div></div>

CSS

css

#container {  display: grid;  grid-template-columns: min-content min-content 1fr;  grid-gap: 5px;  box-sizing: border-box;  height: 200px;  width: 100%;  background-color: #8cffa0;  padding: 10px;}#container > div {  background-color: #8ca0ff;  padding: 5px;}