min-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 Januar 2020 browserübergreifend verfügbar.
Das min-content Größenschlüsselwort repräsentiert die minimale intrinsische Größe eines Elements. Das Schlüsselwort verkleinert das Element auf die kleinstmögliche Größe, ohne vermeidbare Überläufe seines Inhalts zu verursachen. Bei Textinhalt bewirkt dieses Schlüsselwort, dass der Inhalt bei jeder Gelegenheit (wie Leerzeichen zwischen Wörtern) umbrochen wird, und das Element wird nur so breit 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
css
/* 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
Kästen mit min-content dimensionieren
HTML
html
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
CSS
css
.item {
width: min-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Ergebnis
Rasterspalten mit min-content dimensionieren
HTML
html
<div id="container">
<div>Item</div>
<div>Item with more text in it.</div>
<div>Flexible item</div>
</div>
CSS
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-Boxgrößen Modul