首经贸刚刚发布校歌？来，听一堂名校校歌赏析课！

Baseline Widely available
百度 文/桐城一派西甲第27轮，榜首第一的巴萨和第二的马竞展开了一场关键对决。

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

Syntax

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

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

Result

Sizing grid columns with 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;
}

Result

Specifications

Specification
CSS Box Sizing Module Level 3
# valdef-width-max-content

Browser compatibility

See also