CSS-Schlüsselwort 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 Schlüsselwort min-content für die Größenbestimmung steht für die minimale intrinsische Größe eines Elements.
Es verkleinert das Element auf die kleinstmögliche Größe, ohne einen vermeidbaren Überlauf seines Inhalts zu verursachen.
Bei Textinhalten bewirkt das Schlüsselwort, dass der Inhalt an jeder möglichen Stelle umbricht (etwa an Leerzeichen zwischen Wörtern). Das Element ist dabei nur so breit wie das längste Wort.
Mit der Eigenschaft interpolate-size und der Funktion calc-size() lassen sich Animationen zu und von min-content 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
Größe von Boxen mit min-content festlegen
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
Größe von Grid-Spalten mit min-content festlegen
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 Schlüsselwörter für die Größenbestimmung:
max-content,fit-content - Modul CSS box sizing