`fit-content` CSS-Schlüsselwort

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.

Das fit-content Größenschlüsselwort steht für eine Elementgröße, die sich an ihren Inhalt anpasst, während sie 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 Rasterspuren verwendet (zum Beispiel in grid-template-columns und grid-auto-rows) und für die Berechnung der Boxgröße bei Eigenschaften wie width, height, min-width und max-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 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 vergrößern, nachdem die relevante Dimension die Größenbegrenzung seines Containers erreicht hat.

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

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

wobei stretch die Randbox des Elements mit der Breite seines Enthaltenden Blocks abgleicht. Das Schlüsselwort ist im Wesentlichen gleichbedeutend mit fit-content(stretch).

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

Beispiele

Größe von Boxen mit fit-content

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;
}