Mot-clé CSS `max-content`

Baseline Large disponibilité

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.

En savoir plus
Voir la compatibilité complète

Le mot-clé CSS de dimensionnement max-content représente la taille intrinsèque maximale d'un élément. Ce mot-clé étend l'élément à la plus grande taille nécessaire pour afficher son contenu sans retour à la ligne souple. Pour le contenu textuel, ce mot-clé n'effectue aucun retour à la ligne, même si cela provoque un dépassement.

La propriété interpolate-size et la fonction calc-size() peuvent être utilisées pour permettre des animations vers et depuis max-content.

Syntaxe

css

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

Exemples

Dimensionner des boîtes avec `max-content`

HTML

html

<div id="container">
 <div class="item">Élément</div>
 <div class="item">
 Élément avec plus de texte qui dépasse la boîte à largeur fixe.
 </div>
</div>

CSS

css

#container {
 background-color: #8cffa0;
 padding: 10px;
 width: 200px;
}
.item {
 width: max-content;
 background-color: #8ca0ff;
 padding: 5px;
 margin-bottom: 1em;
}

Résultat

[フレーム]

Dimensionner des colonnes de grille avec `max-content`

HTML

html

<div id="container">
 <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: max-content max-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;
}