min-content
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das min-content-Größen-Schlüsselwort repräsentiert die minimale intrinsische Größe eines Elements. Das Schlüsselwort verkleinert das Element auf die kleinstmögliche Größe, ohne dass ein vermeidbares Überlaufen seines Inhalts auftritt. Bei Textinhalt sorgt dieses Schlüsselwort dafür, dass der Inhalt bei jeder Gelegenheit (wie zum Beispiel bei Leerzeichen zwischen Wörtern) umbrochen wird, und das Element wird nur so breit sein wie das längste Wort.
Die interpolate-size-Eigenschaft und die calc-size()-Funktion können verwendet werden, um Animationen zu und von min-content zu ermöglichen.
Syntax
/* Used as a length value */
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;
/* Used in grid tracks */
grid-template-columns: 200px 1fr min-content;
Beispiele
Boxen mit min-content dimensionieren
HTML
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
CSS
.item {
width: min-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Ergebnis
Rasterspalten mit min-content dimensionieren
HTML
<div id="container">
<div>Item</div>
<div>Item with more text in it.</div>
<div>Flexible item</div>
</div>
CSS
#container {
display: grid;
grid-template-columns: min-content min-content 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 3 # valdef-width-min-content |
Browser-Kompatibilität
Siehe auch
- Verwandte Größenschlüsselwörter:
max-content,fit-content - CSS Boxmodell Modul