Ключевое слово CSS `max-content`

Ключевое слово размера max-content обозначает максимальный внутренний размер элемента. Это ключевое слово увеличивает элемент до наибольшего размера, необходимого для отображения его содержимого без мягких переносов. Для текстового содержимого это ключевое слово вообще не переносит текст, даже если это приводит к переполнению.

Свойство interpolate-size и функция calc-size() позволяют включать анимацию при переходе к max-content и обратно.

Синтаксис

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

Примеры

Изменение размера блоков с помощью 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;
}

Результат

Изменение размера столбцов сетки с помощью 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;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Связанные ключевые слова для изменения размера: min-content, fit-content
• Модуль CSS box sizing