W3cubDocs

/CSS

max-content

The max-content sizing keyword represents the intrinsic maximum width of the content. For text content this means that the content will not wrap at all even if it causes overflows.

Syntax

/* Used as a length */
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

Using max-content for box sizing

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

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

Specifications

Specification Status Comment
CSS Box Sizing Module Level 3
The definition of 'max-content' in that specification.
Working Draft Defines the keyword as laid out box size for width, height, min-width, min-height, max-width and max-height.
CSS Grid Layout
The definition of 'max-content' in that specification.
Candidate Recommendation Defines the keyword when used as a track size.

Browser compatibilityUpdate compatibility data on GitHub

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Supported for width (and other sizing properties)

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
max-content 46
46
22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
79
79
79
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
66
66
3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No 44 11
11
2
Uses the non-standard name: intrinsic
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
max-content 46 46 66
66
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
43 11
11
1
Uses the non-standard name: intrinsic
5.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/max-content