[css-sizing-3] Clarify equivalence of min-content, max-content, and fit-content on the block axis

[gitspeaks]

The CSS Sizing specification defines the following:

max-content block size
The box’s “ideal” size in the block axis—usually the block size of the content after layout.

min-content block size
The minimum content size in the block axis. For block containers, tables, and inline boxes, this is equivalent to the max-content block size.

fit-content block size
Defined as:
max(min-content size, min(max-content size, stretch-fit size))

When the min-content size equals the max-content size, the stretch-fit term has no effect, and this simplifies to:

fit-content block size = min-content block size = max-content block size

In Flexbox, the hypothetical cross size of a flex item is determined by performing layout as if it were an in-flow block-level box with the used main size and the given available space, treating auto as fit-content. Similarly, the Grid specification treats a grid item’s min-content contribution as an intrinsic size. Together, these imply that the min-content, max-content, and fit-content keywords all resolve identically for block-axis sizing in both flex and grid layouts.

However, reading the spec literally, one might assume that these keywords introduce distinct block-axis sizing behaviors. In practice, though, they appear to always resolve to the same value. This redundancy may add unnecessary complexity for authors trying to understand or reason about intrinsic block sizing.

Are there any real-world or edge-case scenarios where the block-axis min-content, max-content, and fit-content sizes differ? If not, would it improve clarity to state:

On the block axis, min-content, max-content, and fit-content always resolve to the same size.

This clarification could help reduce confusion and avoid overthinking intrinsic block sizing in layouts.

[Loirooriol]

Together, these imply that the min-content, max-content, and fit-content keywords all resolve identically for block-axis sizing in both flex and grid layouts.

No. This is not true for flex containers nor blockgrid containers. No browser follows the spec, though.

See example in #6457 (comment)

[gitspeaks]

No. This is not true for flex containers nor block containers.

How is that not true? The spec quote is crystal clear when it comes to block containers:

min-content block size
The minimum content size in the block axis. For block containers, tables, and inline boxes, this is equivalent to the max-content block size.

If min-content and max-content on the block axis are equal for block containers, then plugging those into the fit-content formula results in all values being equal. It’s straightforward math based on the spec.

[Loirooriol]

Flex/grid containers are not block containers.

[gitspeaks]

Flex/grid containers are not block containers.

I never claimed that flex or grid containers are block containers. My point was that, on the block axis, min-content, max-content, and fit-content all produce the same value for the item’s block size.

Do you know of a case where these would differ for a flex item, for example?

[Loirooriol]

OK, I made a typo, I wanted to say "This is not true for flex containers nor grid containers"

[gitspeaks]

No. This is not true for flex containers nor ~grid containers. No browser follows the spec, though.

See example in #6457 (comment)

I suspect no browser follows the spec because its wording is overly convoluted.

For example, in the grid section you cited, it states:

“For the purpose of this step: if sizing the grid container under a max-content constraint, the free space is infinite; if sizing under a min-content constraint, the free space is zero.”

Then it defines:

max-content constraint: a sizing constraint imposed by the box’s containing block that causes it to produce its max-content contribution.

min-content constraint: a sizing constraint imposed by the box’s containing block that causes it to produce its min-content contribution.

But how can the grid container’s own containing block impose a constraint on itself? It’s unclear. A much clearer wording would be:

“For the purpose of this step: if the grid container’s inline or block size is max-content, the free space is infinite; if it is min-content, the free space is zero.”

The flexbox spec isn’t any clearer. In section 9.9.2 “Flex Container Intrinsic Cross Sizes”, it doesn’t distinguish between min-content and max-content sizing along the cross axis. Instead, it delegates sizing to the flex items—which themselves may be flex, grid or block containers—so the only meaningful difference ends up being the grid container’s space‑distribution nuances.

cc @fantasai