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 Schlüsselwort ist äquivalent zu fit-content(stretch). In der Praxis bedeutet dies, dass das Element den verfügbaren Raum ausnutzt, jedoch niemals mehr als max-content.
Die fit-content Größe wird mit der folgenden Gleichung berechnet, wobei <available-space> die Größe des übergeordneten Elements oder des Raster-Tracks in der Grid-Layout ist:
min(max-content, max(min-content, <available-space>))
Wenn fit-content als festgelegte Box-Größe für width, height, min-width, min-height, max-width und max-height verwendet wird, beziehen sich die maximalen und minimalen Größen auf die Inhaltsgröße.
Die interpolate-size Eigenschaft und die calc-size() Funktion können verwendet werden, um Animationen zu und von fit-content zu ermöglichen.
Hinweis:
Die CSS-Sizing-Spezifikation definiert auch die fit-content() Funktion. Diese Seite beschreibt das Schlüsselwort.
Syntax
width: fit-content;
block-size: fit-content;
Beispiele
Verwendung von fit-content für das Box-Sizing
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
Loading…
Siehe auch
- Verwandte Größen-Schlüsselwörter:
min-content,max-content - CSS-Box-Sizing Modul