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 max-content-Größenbestimmungs-Keyword repräsentiert die maximale intrinsische Größe eines Elements. Das Keyword erweitert das Element auf die größte Größe, die benötigt wird, um seinen Inhalt ohne weiche Umbrüche anzuzeigen. Für Textinhalte bricht dieses Keyword den Inhalt überhaupt nicht um, selbst wenn es zu einem Überlauf führt.
Die interpolate-size-Eigenschaft und die calc-size()-Funktion 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
Loading…
Siehe auch
- Verwandte Größenbestimmungs-Keywords:
min-content,fit-content - CSS-Boxmodell Modul