Should min-content really include the width/height of flex-basis: 0% scrollable items?

[benface]

Consider the following CodePen (in Chrome, because it uses calc-size).

I want the card's height to be based on its content and on the viewport's height, in a way that doesn't seem possible:

1. The card should never be taller than its content's height (which I assume to be max-content).
2. The card's height should be allowed to shrink to fit in the viewport, in which case the body section should become scrollable... however, it should never get smaller than its "minimum height" (which I assume to be min-content).

To achieve 1, uncomment max-height: max-content; – looks like max-content is computed correctly, great.

But to achieve 2, the only way I could find was to use flex-basis: 0 instead of flex-basis: 0%, but then max-content is the same as min-content, and there is no way to size the card based on its content anymore.

I feel like the min-content when flex-basis is 0% should be the same as when it is 0, that is, it shouldn't include the height of the body since it is scrollable (which I imagine should be the same for overflow: hidden). That way, it would be possible to satisfy both requirements by using min-content in the min-height, and max-content in the max-height.

Hopefully that makes sense!

[Loirooriol]

however, it should never get smaller than its "minimum height" (which I assume to be min-content)

This is in conflict with constraint (1), so I'm going to ignore it.

You are using height: calc-size(min-content, max(size, 100vh - 20px));
That will of course not enforce both of your max constraints. You need min() instead of max().
Also, no need for calc-size(), just use the good old max-height: calc(100vh - 20px);

but then max-content is the same as min-content

Yeah, no browser supports min-content and max-content being different in the block axis.

[benface]

Thank you for replying @Loirooriol!

This is in conflict with constraint (1), so I'm going to ignore it.

How so?

You are using height: calc-size(min-content, max(size, 100vh - 20px));
That will of course not enforce both of your max constraints. You need min() instead of max().
Also, no need for calc-size(), just use the good old max-height: calc(100vh - 20px);

You're right that I overcomplicated the example. Sure, I can replace both the height and max-height with max-height: calc(100vh - 20px), but then I would need something like min-height: min-content to ensure this doesn't happen when the viewport's height gets too small:

But we're back to the same problem, because min-content returns the height of the whole content in the scroll area, rather than however small it's allowed to get.

Yeah, no browser supports min-content and max-content being different in the block axis.

That's a shame. The way you phrase it seems to imply that it's not necessarily what the spec says?

[Loirooriol]

How so?

If you have min and max constraints you need to specify which wins. From the "however" in (2) I can infer that the min wins over the max. But I can't infer what happens if the min from (2) conflicts with the max from (1). Also I don't understand what min you want in (2). When you say "I assume" you mean you don't know either?

The way you phrase it seems to imply that it's not necessarily what the spec says?

Yes, see #6457 (comment)

Anyways, this sounds vaguely related to https://drafts.csswg.org/css-sizing-4/#intrinsic-contribution-override, but hard to say since I'm not really understanding what you want.

[benface]

If you have min and max constraints you need to specify which wins. From the "however" in (2) I can infer that the min wins over the max. But I can't infer what happens if the min from (2) conflicts with the max from (1). Also I don't understand what min you want in (2). When you say "I assume" you mean you don't know either?

Ok, sorry, I should have phrased it better. I want the card's height to be clamp(min-content, calc(100vh - 20px), max-content), where

• I understand min-content to be the header's height (since it's not allowed to shrink) + the body's min-height and padding (since it's allowed to shrink and has flex-basis: 0% and overflow-y: auto) + the footer's height (since it's also not allowed to shrink), so ~200px.
• I understand max-content to be the same thing except that for the body, it should be the whole height of the scrollable area's content, so ~415px.

Yes, see #6457 (comment)

Thank you, that's good news. I will try to find issues in the browsers' bug trackers, and if I can't find them, create them. :)