How do min-content and max-content work?

Question

How are the min-content and max-content values calculated in CSS?

And what does intrinsic dimension mean?

Answer 1

Note: "width" in this text refers to the "logical width", not CSS's width; that is, the values are also valid for CSS's height, if the language direction is vertical (like east-asian languages) or in flexbox or grid. min-content and max-content are valid values for width, height, min-width, min-height, max-width, max-height and even more properties (like flex-basis).

What are the intrinsic dimensions of a box?

CSS sizing level 3 introduced the concept of intrinsic dimensions - the opposite of extrinsic. An extrinsic dimension of a box is calculated on the box's parent box. For example width: 80% is said an extrinsic dimension as the width of the subject depends on the width of its containing box.

Contrarily to that, width: min-content is said intrinsic as the width of the box is calculated on the dimension of the contents that the box itself contains.

Intrinsic dimensions are properties of the box itself, extrinsic dimensions are only available if the box is placed in the document and in a context that permits these values to be calculated. For example, in CSS-flow (the classic CSS layout mode), as you probably know, height: 20% has only effect if height is defined in the parent element (i.e. it's inheritable); that is a case of an extrinsic dimension that is not calculable (when an extrinsic value is not available, CSS fallbacks to its intrinsic equivalent). Instead height: min-content is always calculable, as it is intrinsic to the box itself, and it is always the same regardless of the box's placement (or the box's absence) in the document.

---

The definition of min-content and max-content has changed many times over the years but the result always stayed the same, and it is pretty straightforward to grasp. They were originally requested by the community as keywords for width, whose computed value would match the widths of a box when the box is floating. And indeed, the definition of these two properties was originally based on the behavior of float; now they are more generically defined as follows:

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.

In other words, the smallest width of a box where the box's contents don't overflow the box itself.

A good way to visualize this is using, in fact, float.

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

(GIF source: http://jsfiddle.net/6srop4zu/)

In the above GIF, the red box's min-content width equals the red box's width at the time the blue box's width is 0px (234px in the GIF, might be different in the jsfiddle).

As you can see, if the red box was made smaller, the word supercalifragilisticexpialidocious would overflow the red box, hence in this case the min-content equals the width of that particular word, as it is the one that takes the most space horizontally.

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 source: http://jsfiddle.net/nktsrzvg/)

In the above GIF, the red box's max-content width equals the red box's width when the blue box's width is infinite (386px in the GIF, might be different in the jsfiddle).

Here, the red box fully takes advantage of the available space on the x axis in the blue box, but without wasting it. The contents are allowed to expand on the relevant axis without restrictions, and the red box wraps them and at the point of maximum expansion.

---

What about fit-content, stretch and others? These properties are currently being revisited and as such they are not stable (date: July 2018). They will be added here when they get a bit more mature (hopefully soon).

Answer 2

min-content:

The minimum width that a content (a group of words) needs. It means width of the biggest word in the content.

Example:

hi this is

biggestWordInTheContent

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

max-content:

The maximum possible width that a content (a group of words) can take. It means the width of the content when all the words arranged together in one line.

Example:

hi this is a content without considering any line breaks.

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