CSS-Schlüsselwort `fit-content`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2021 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das Größen-Schlüsselwort fit-content steht für eine Elementgröße, die sich an ihren Inhalt anpasst und dabei 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 Funktion fit-content(). Die Funktion wird zur Festlegung der Größe von Grid-Tracks (beispielsweise in grid-template-columns und grid-auto-rows) sowie für die Größe von Layout-Boxen bei Eigenschaften wie width, height, min-width und max-height verwendet.

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 wie width, height, block-size, inline-size, min-width und max-width verwendet. Bei diesen Eigenschaften bezieht sich die berechnete Größe auf die Content-Box des Elements.

Wenn fit-content festgelegt ist, wächst oder schrumpft das Element passend zu seinem Inhalt. Es wächst jedoch nicht weiter, sobald die betreffende Abmessung die Größengrenze seines Containers erreicht.

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

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

Dabei passt stretch die Margin-Box des Elements an die Breite seines Containing Blocks an. Das Schlüsselwort entspricht im Wesentlichen fit-content(stretch).

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

Beispiele

Boxen mit fit-content dimensionieren

HTML

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

css

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

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