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öß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 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 fit-content()-Funktion. Die Funktion wird zur Größenbestimmung von Rasterspuren verwendet (beispielsweise in grid-template-columns und grid-auto-rows) und zur Berechnung der Kastenabmessungen für 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 auf diesen Eigenschaften angewendet wird, bezieht sich die berechnete Größe auf den Inhaltsbereich des Elements.

Wenn fit-content gesetzt ist, wächst oder schrumpft das Element, um seinen Inhalt anzupassen, stoppt jedoch das Expandieren, sobald 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 den Randbereich des Elements an die Breite seines umgebenden Blocks anpasst. Das Schlüsselwort ist im Wesentlichen gleichbedeutend mit fit-content(stretch).

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

Beispiele

Größenbestimmung 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;
}

Ergebnis

Spezifikationen

Specification
CSS Box Sizing Module Level 4 # valdef-width-fit-content

Browser-Kompatibilität

Siehe auch

Verwandte Größenschlüsselwörter: min-content, max-content
CSS-Kastenmodell Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden