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 zur Größenbestimmung steht für die maximale intrinsische Größe eines Elements. Das Schlüsselwort erweitert das Element auf die größtmögliche Größe, die zur Anzeige seines Inhalts ohne weiche Umbrüche erforderlich ist. Bei Textinhalten umbricht dieses Schlüsselwort den Inhalt überhaupt nicht, selbst wenn dadurch ein Überlauf verursacht wird.
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
Box-Größen mit max-content
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
Größe von Gitternetzspalten mit max-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: 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 Schlüsselwörter zur Größenbestimmung:
min-content,fit-content - CSS-Boxgrößenbestimmung Modul