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 January 2020.
Das Schlüsselwort min-content
steht für die minimale intrinsische Größe des Inhalts. Bei Textinhalt bedeutet dies, dass der Inhalt alle weichen Umbruchmöglichkeiten nutzt und so klein wird wie das längste Wort.
Die Eigenschaft interpolate-size
und die Funktion calc-size()
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
Verwenden von min-content für die 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 Rasterspalten 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
min-content |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Siehe auch
- Verwandte Schlüsselwörter zur Größenbestimmung:
max-content
,fit-content
- CSS-Box-Größenbestimmung Modul