min-content
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Das min-content Schlüsselwort zur Größenbestimmung repräsentiert die minimale intrinsische Größe des Inhalts. Für Textinhalte bedeutet dies, dass der Inhalt alle Gelegenheiten zum weichen Umbruch nutzt und so klein wie das längste Wort wird.
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 */
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
Verwendung von min-content für Box-Größenbestimmung
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ößenbestimmung von Grid-Spalten mit min-content
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
| Specification |
|---|
| CSS Box Sizing Module Level 3 # valdef-width-min-content |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwandte Schlüsselwörter zur Größenbestimmung:
max-content,fit-content - CSS Box-Modell Modul