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

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

Синтаксис

/* Used in sizing properties */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

Описание

Это ключевое слово используется со свойствами задания размеров, такими как width, height, block-size, inline-size, min-width и max-width. При использовании с этими свойствами вычисленный размер относится к области содержимого элемента.

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

Размер fit-content вычисляется по следующей формуле:

min(max-content, max(min-content, stretch))

где stretch подгоняет внешние отступы элемента под ширину его блока-контейнера. По сути, это ключевое слово эквивалентно fit-content(stretch).

Анимацию к значению fit-content и от него можно включить с помощью свойства interpolate-size и функции calc-size().

Примеры

Задание размеров блоков с помощью fit-content

HTML

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>

CSS

.container {
  border: 2px solid #cccccc;
  padding: 10px;
  width: 20em;
}

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

Результат

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

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

См. также

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