What is the difference between CSS fit-content and max-content?

Question

I\'m following this article https://css-tricks.com/almanac/properties/w/width/ to try to understand how this rules work.

I have this example:

相关标签:

Answer 1

As you can see it here https://developer.mozilla.org/en-US/docs/Web/CSS/width the max-width simply sets the size based on the space its children needs regardless if it's available or not, while the fit-width checks if the space the children needs using max-width is available and if not, it uses the min-width instead. For further reading about the difference between max-width and min-width see http://dev.w3.org/csswg/css-sizing/#block-intrinsic.

Answer 2

fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.

Answer 3

the one scenario in which max-content and fit-content don't behave the same way is when you set a 'max-width' property on the element, and the viewport size is narrower than the max-width value. in this case the 'max-content' value will result in a layout in which the text will be cut arbitrarily (and the only way to see the entire text is to scroll horizontally). using the 'fit-content' value, on the other hand, will ignore the max-width property and adjust the text nicely inside the viewport.

Answer 4

In a few words width: fit-content; means :

"Use the space you can (available) but never less than your min-content and never more than your max-content"