max-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 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
| Spezifikation |
|---|
| 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