The intrinsic size (as oppose to the extrinsic size) of an element is a size based on the content of an element. Inline elements are sized intrinsically, properties like width have no effect on them.
min-content, max-content, and fit-content are keywords used to size the width (and/or height) of an element based on its intrinsic size.
min-content
The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.
Written in another way, it's the width of the widest content in that element. This is most obvious with text, where the element will be as wide as the longest word. It aims to take all soft wrap opportunities.
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.
Sort of the opposite of min-content, where the box will be as wide as it needs to be without wrapping/overflowing content. Remember that it's based on the content, so max-content can easily be narrower than auto (which expands as much space as possible).
fit-content
If the available space in a given axis is definite, equal to clamp(min-content size, stretch-fit size, max-content size) (i.e. max(min-content size, min(max-content size, stretch-fit size))). When sizing under a min-content constraint, equal to the min-content size. Otherwise, equal to the max-content size in that axis.
Probably the most confusing one. There is both a fit-content keyword, and a fit-content() function used in [[cssgrid]].
It takes up the space it can, but never less than the min-content, and never more than the max-content.
fit-content = min(max-content, max(min-content, fill-available))
https://www.w3.org/TR/css-sizing-3/#auto-box-sizes https://css-tricks.com/almanac/properties/w/width/#aa-keyword-values
[[css]] [[cssgrid]] [[intrinsiclayout]] [[layout]] [[responsivedesign]]