Примечание: «ширина» в этом тексте относится к «логической ширине», а не к CSS width; то есть значения также действительны для CSS height, если языковое направление вертикальное (например, восточно-азиатские языки) или в гибком блоке или сетке. min-content и max-content - допустимые значения для width, height, min-width, min-height, max-width, max-height и других свойств (например, flex-basis).

Каковы внутренние размеры коробки?

Уровень 3 в CSS представил концепцию размеров внутренний - противоположность внешний. Размер внешний бокса вычисляется по родительскому боксу. Например, width: 80% называется внешнее измерение, поскольку width субъекта зависит от width его содержащего бокса.

В противоположность этому, width: min-content называется внутренний, поскольку ширина блока рассчитывается на основе размера содержимого, которое содержит сам блок.

Размеры Внутренний - это свойства самого бокса, внешние размеры доступны только в том случае, если бокс помещен в документ и в контексте, который позволяет вычислять эти значения. Например, в CSS-потоке (классический режим макета CSS), как вы, наверное, знаете, height: 20% действует только в том случае, если height определен в родительском элементе (т.е. он наследуется); это случай измерения внешний, которое не поддается вычислению (когда внешнее значение недоступно, CSS возвращается к его внутреннему эквиваленту). Вместо этого height: min-content всегда можно вычислить, так как это внутренний для самого блока, и он всегда одинаков, независимо от размещения блока (или его отсутствия) в документе.

Определение min-content и max-content менялось много раз за эти годы, но результат всегда оставался неизменным, и его довольно легко понять. Изначально они были запрошены сообществом как ключевые слова для width, вычисленное значение которых будет соответствовать ширине поля, если поле имеет значение floating. И действительно, определение этих двух свойств изначально было основано на поведении float; теперь они более обобщенно определены следующим образом:

min-content

https://www.w3.org/TR/css-sizing-3/#min-content

The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

Другими словами, наименьшая ширина коробки, при которой содержимое коробки не выходит за пределы самого поля.

Фактически, хороший способ визуализировать это - использовать float.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(Источник GIF: http://jsfiddle.net/6srop4zu/)

В приведенном выше GIF минимальная ширина содержимого красного поля равно ширине красного поля в то время, когда ширина синего поля равна 0 пикселей (234 пикселя в GIF, может отличаться в jsfiddle).

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

max-content

https://www.w3.org/TR/css-sizing-3/#max-content

A box’s “ideal” size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(Источник GIF: http://jsfiddle.net/nktsrzvg/)

В приведенном выше GIF максимальная ширина содержимого красного блока равен ширине красного блока, когда ширина синего блока бесконечна (386 пикселей в GIF, может отличаться в jsfiddle).

Здесь красный прямоугольник полностью использует доступное пространство по оси x в синем поле, но не тратит его впустую. Содержимое может расширяться по соответствующей оси без ограничений, а красный прямоугольник оборачивает их в точке максимального расширения.

А как насчет fit-content, stretch и других? Эти свойства в настоящее время пересматриваются, и поэтому они нестабильны (дата: июль 2018 г.). Они будут добавлены сюда, когда станут немного более зрелыми (надеюсь, скоро).

мин-содержание:

Минимально возможная ширина, которую может иметь контент (группа слов). Это означает ширину самого большого слова в содержании.

Пример:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

макс-контент:

Максимально возможная ширина, которую может иметь контент (группа слов). Это означает ширину содержимого, когда все слова расположены в одной строке.

Пример:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->