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

La fonction (en-US) CSS fit-content() permet d'obtenir une dimension restreinte à un intervalle donné (en utilisant la formule min(taille maximale, max(taille minimale, argument)).

Exemple interactif

Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par max-content et où la taille minimale est définie par auto et qui est calculée de façon similaire à auto (i.e. minmax(auto, max-content)), sauf que la taille de la piste est ramenée à argument si celui-ci est supérieur à auto.

Voir la page grid-template-columns pour plus d'informations sur les mots-clés max-content et auto.

La fonction fit-content() peut également être utilisée pour définir la taille d'une boîte avec width, height, min-width, min-height, max-width et max-height où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.

Syntaxe

La fonction fit-content() accepte un argument de type <length> ou <percentage>.

css
/* Valeurs de type <length> */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* Valeurs de type <percentage> */
fit-content(40%)

Valeurs

<length>

Une longueur exprimée de façon absolue.

<percentage>

Un pourcentage relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relatif à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en bloc pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.

Exemples

CSS

css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

html
<div id="container">
  <div>Élément aussi large que le contenu.</div>
  <div>
    Un élément avec plus de texte à l'intérieur. Comme son conteneur est plus
    large que la largeur maximale, il est ramené sur 300 pixels.
  </div>
  <div>Un élément flexible</div>
</div>

Résultat

Spécifications

Specification
CSS Box Sizing Module Level 4
# sizing-values

Compatibilité des navigateurs

css.properties.grid-template-columns.fit-content

BCD tables only load in the browser

css.properties.width.fit-content_function

BCD tables only load in the browser

Voir aussi