max-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 max-content steht für die maximale intrinsische Größe eines Elements. Das Schlüsselwort erweitert das Element auf die größtmögliche Größe, die nötig ist, um den gesamten Inhalt ohne Umbrüche darzustellen. Bei Textinhalt sorgt dieses Schlüsselwort dafür, dass der Inhalt nicht umbrochen wird, selbst wenn dies zu Überlauf führt.
Die Eigenschaft interpolate-size und die Funktion calc-size() können verwendet werden, um Animationen zu und von max-content zu ermöglichen.
Syntax
css
/* Used as a length value */
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;
/* Used in grid tracks */
grid-template-columns: 200px 1fr max-content;
Beispiele
Boxen mit max-content dimensionieren
HTML
html
<div id="container">
<div class="item">Item</div>
<div class="item">
Item with more text in it which will overflow the fixed width box.
</div>
</div>
CSS
css
#container {
background-color: #8cffa0;
padding: 10px;
width: 200px;
}
.item {
width: max-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Ergebnis
Grid-Spalten mit max-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: max-content max-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-max-content |
Browser-Kompatibilität
Siehe auch
- Verwandte Größen-Schlüsselwörter:
min-content,fit-content - CSS-Box-Modul für Größenanpassungen