Firefox Tomorrow

css keyword

`max-content` CSS keyword

View on MDN ↗

The max-content sizing keyword represents the maximum intrinsic size of an element. The keyword expands the element to the largest size needed to display its content without any soft wraps. For text content, this keyword does not wrap the content at all, even if it causes overflow.

The interpolate-size property and calc-size() function can be used to enable animations to and from max-content.

Syntax

/* 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;

Examples

Sizing boxes with max-content

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

#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Sizing grid columns with max-content

HTML

<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>

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;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also