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.

Das Schlüsselwortfit-content repräsentiert eine Elementgröße, die sich an ihren Inhalt anpasst, wobei sie innerhalb der Grenzen ihres Containers bleibt. Das Schlüsselwort stellt sicher, dass das Element nie kleiner als seine minimale intrinsische Größe (min-content) oder größer als seine maximale intrinsische Größe (max-content) ist.

Hinweis:Dieses Schlüsselwort unterscheidet sich von der Funktionfit-content(). Die Funktion wird für die Größenbestimmung von Gittern verwendet (zum Beispiel ingrid-template-columns undgrid-auto-rows) und für die Größenbestimmung von gestalteten Boxen für Eigenschaften wiewidth,height,min-width undmax-height.

Syntax

css

/* Used in sizing properties */width: fit-content;height: fit-content;inline-size: fit-content;block-size: fit-content;

Beschreibung

Dieses Schlüsselwort wird mit Größeneigenschaften wiewidth,height,block-size,inline-size,min-width undmax-width verwendet. Wenn es auf diese Eigenschaften angewendet wird, bezieht sich die berechnete Größe auf denInhaltsbereich des Elements.

Wennfit-content eingestellt ist, wächst oder schrumpft das Element, um seinem Inhalt zu entsprechen, hört jedoch auf zu expandieren, nachdem die relevante Dimension die Größenbegrenzung seines Containers erreicht hat.

Diefit-content-Größe wird mit der folgenden Formel berechnet:

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

wobeistretch denRandbereich des Elements an die Breite seinesumgebenden Blocks anpasst. Das Schlüsselwort ist im Wesentlichen gleichbedeutend mitfit-content(stretch).

Sie können Animationen zu und vonfit-content mit der Eigenschaftinterpolate-size und der Funktioncalc-size() aktivieren.

Beispiele

Größenbestimmung von Boxen mit fit-content

HTML

html

<div>  <div>Item</div>  <div>Item with more text in it.</div>  <div>    Item with more text in it, hopefully we have added enough text so the text    will start to wrap.  </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;}