fit-content
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2021.
Le mot-clé fit-content
se comporte comme fit-content(stretch)
. En pratique, cela signifie que le conteneur utilisera l'espace disponible, mais jamais plus que max-content
.
Lorsqu'elle est utilisée comme taille de boîte pour width
, height
, min-width
, min-height
, max-width
et max-height
, les tailles maximale et minimale se réfèrent à la taille du contenu.
Note :
La spécification CSS Sizing définit également la fonction fit-content
. Cette page détaille le mot-clé.
Syntaxe
width: fit-content;
block-size: fit-content;
Exemple
Utilisation de fit-content
pour le dimensionnement des boîtes
HTML
<div class="container">
<div class="item">Texte</div>
<div class="item">Un peu plus de texte</div>
<div class="item">
Voyons maintenant le comportement avec du texte long, permettant ainsi de
montrer le fonctionnement de fit-content !
</div>
</div>
CSS
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Résultat
Spécifications
Specification |
---|
CSS Box Sizing Module Level 4 # valdef-width-fit-content |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Mots-clés relatifs à la taille :
min-content
,max-content