В чем разница между CSS-контентом и максимальным содержанием?

Я следую этой статье https://css-tricks.com/almanac/properties/w/width/, чтобы попытаться понять, как работают эти правила.

У меня есть этот пример:

*{margin:0; padding:0}
.box{
  background: lightgreen;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

<div class="box">
  <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
  <figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>

Ответ 1

Как вы можете видеть здесь https://developer.mozilla.org/en-US/docs/Web/CSS/width, max-width просто устанавливает размер в зависимости от пространства, в котором нуждаются его дочерние элементы, независимо от того, доступен он или нет, в то время как fit-width проверяет, доступно ли пространство, в котором нуждаются дочерние элементы, используя max-width, и если нет, он использует минимальную ширину. Для дальнейшего чтения о разнице между max-width и min-width см. http://dev.w3.org/csswg/css-sizing/#block-intrinsic.

Ответ 2

fit-content использует max-content, если available < max-content, то он использует доступный. Если не available < min-content, то он использует min-content.

Ответ 3

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

Ответ 4

В нескольких словах width: fit-content; означает:

"Используйте пространство, которое вы можете (доступно), но не меньше, чем ваш min-content и никогда не больше, чем ваш max-content"