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 fit-content-Größen-Schlüsselwort steht für eine Elementgröße, die sich an den Inhalt anpasst und dabei 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.
Hinweis:
Dieses Schlüsselwort unterscheidet sich von der fit-content()-Funktion. Die Funktion wird für die Größenbestimmung von Gittern (zum Beispiel in grid-template-columns und grid-auto-rows) und für die Größenbestimmung von angelegten Boxen für Eigenschaften wie width, height, min-width und max-height verwendet.
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ößen-Eigenschaften wie width, height, block-size, inline-size, min-width und max-width verwendet. Wenn es bei diesen Eigenschaften genutzt wird, bezieht sich die berechnete Größe auf die Inhaltsbox des Elements.
Wenn fit-content gesetzt ist, wächst oder schrumpft das Element, um seinen Inhalt aufzunehmen, hört jedoch auf zu expandieren, sobald die relevante Dimension die Größenbegrenzung seines Containers erreicht.
Die fit-content-Größe wird mit folgender Formel berechnet:
min(max-content, max(min-content, stretch))
wobei stretch die Randbox des Elements an die Breite seines einhaltenden Blocks anpasst. Das Schlüsselwort entspricht im Wesentlichen fit-content(stretch).
Sie können Animationen zu und von fit-content mit 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
| Specification |
|---|
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |
Browser-Kompatibilität
Siehe auch
- Verwandte Größen-Schlüsselwörter:
min-content,max-content - [CSS-Box-Sizing]-Modul(/de/docs/Web/CSS/Guides/Box_sizing)