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 Schlüsselwort min-content für die Größenbestimmung repräsentiert die minimale intrinsische Größe eines Elements. Dieses Schlüsselwort verkleinert das Element auf die kleinstmögliche Größe, ohne vermeidbare Überlappungen seines Inhalts zu verursachen. Bei Textinhalten bewirkt dieses Schlüsselwort, dass der Inhalt bei jeder Gelegenheit (wie z.B. bei Leerzeichen zwischen Wörtern) umbrechen kann, 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 min-content 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
Größenbestimmung von Boxen mit min-content
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
Größenbestimmung von Grid-Spalten mit min-content
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
| 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