Mot-clé CSS `fit-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 novembre 2021.

Le mot-clé CSS fit-content représente une taille d'élément qui s'adapte à son contenu tout en restant dans les limites de son conteneur. Le mot-clé garantit que l'élément n'est jamais plus petit que sa taille intrinsèque minimale (min-content) ou plus grand que sa taille intrinsèque maximale (max-content).

Note : Ce mot-clé est différent de la fonction fit-content(). La fonction est utilisée pour le dimensionnement des pistes de grille (par exemple dans grid-template-columns et grid-auto-rows) et pour le dimensionnement des boîtes mises en page pour des propriétés telles que width, height, min-width et max-height.

Syntaxe

css

/* Utilisé dans les propriétés de dimensionnement */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

Description

Ce mot-clé est utilisé avec des propriétés de dimensionnement telles que width, height, block-size, inline-size, min-width et max-width. Lorsqu'il est utilisé sur ces propriétés, la taille calculée se réfère à la boîte de contenu de l'élément.

Lorsque fit-content est défini, l'élément grandit ou rétrécit pour s'adapter à son contenu, mais cesse de s'étendre une fois que la dimension pertinente atteint la limite de taille de son conteneur.

La taille fit-content est calculée en utilisant la formule suivante :

min(max-content, max(min-content, stretch))

où, stretch correspond à la marge de boîte de l'élément par rapport à la largeur de son bloc englobant. Le mot-clé est essentiellement équivalent à fit-content(stretch).

Vous pouvez activer les animations vers et depuis fit-content en utilisant la propriété interpolate-size et la fonction calc-size().

Exemple

Dimensionner des boîtes avec `fit-content`

HTML

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

css

.container {
  border: 2px solid #cccccc;
  padding: 10px;
  width: 20em;
}

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