`max-content` CSS-Schlüsselwort

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 max-content-Größenschlüsselwort repräsentiert die maximale intrinsische Größe eines Elements. Das Schlüsselwort erweitert das Element auf die größte benötigte Größe, um seinen Inhalt ohne weiche Umbrüche anzuzeigen. Bei Textinhalten wird mit diesem Schlüsselwort der Inhalt überhaupt nicht umbrochen, 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;
}