fit-content

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

Syntax

/* 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ößenattributen wie width, height, block-size, inline-size, min-width und max-width verwendet. Wenn es bei diesen Eigenschaften verwendet wird, bezieht sich die berechnete Größe auf die Inhaltsbox des Elements.

Wenn fit-content gesetzt ist, wächst oder schrumpft das Element, um seinem Inhalt zu entsprechen, hört jedoch auf sich zu erweitern, nachdem die relevante Dimension die Größenbegrenzung seines Containers erreicht.

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

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

wobei stretch die Randbox des Elements an die Breite seines umgebenden Blocks anpasst. Das Schlüsselwort entspricht im Wesentlichen fit-content(stretch).

Sie können Animationen zu und von fit-content mithilfe der interpolate-size Eigenschaft und der calc-size() Funktion aktivieren.

Beispiele

Boxen mit fit-content skalieren

HTML

<div class="container">
 <div class="item">Item</div>
 <div class="item">Item with more text in it.</div>
 <div class="item">
 Item with more text in it, hopefully we have added enough text so the text
 will start to wrap.
 </div>
</div>

CSS

.container {
 border: 2px solid #cccccc;
 padding: 10px;
 width: 20em;
}
.item {
 width: fit-content;
 background-color: #8ca0ff;
 padding: 5px;
 margin-bottom: 1em;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwandte Größen-Schlüsselwörter: min-content, max-content
• CSS Box-Größen Modul