[css-grid] Resolving percentage heights of grid items during min-content sizing · Issue #2674 · w3c/csswg-drafts (original) (raw)

@fantasai that statement makes no sense. Base sizes are the result from the Track Sizing Algorithm - they can't be "auto". They are always a definite size. I'm assuming you mean "the block-size of the grid item after it is flowed in a containing block (CB) that has an inline size of 200px". So, I assume you mean "0 ~200px 0".

@MatsPalmgren Yes, that's what I meant.

Also, I don't understand why you think the base size should be zero in the third test. You are correct that Automatic Minimum Size doesn't apply, but that doesn't make the min-content contribution zero

Right, but we're not looking at the min-content contribution when we're calculating the base size. 1fr expands to minmax(auto, 1fr), not minmax(min-content, 1fr). The grid container is not being sized under a min/max-content constraint--it's explicitly sized at 300px. So the auto minimum is supposed to mean “use the automatic minimum size”, which due to the overflow setting is zero in this case. https://www.w3.org/TR/2017/CR-css-grid-1-20171214/#algo-single-span-items It seems that this is working fine in browsers when calculating columns, it's just not happening for rows. (Note the ED has some half-baked edits on this section, so linking to the CR.)

The point of auto is to add some automagic to the minimum (primarily to account for overflow), so that it is not always the min-content size--if we simply used the min-content size here always, we'd be defeating the point.

@FremyCompany Yes, in those first two cases, your flex container has an auto height, so it first calculates the container size from the max-content contribution of the items, then it resolves the percentage against that. In this case, the max-content contribution of the image is larger than the text, and is controlling the size of the container. Resolving 100% against that means the image simply is the size it is.

In the third case, the float's size is resolved as clamp(min-content, CB, max-content). The min-content size of the image is zero, the max-content is 32px, and CB is 9px, so we get 9px for the float, and the image's 100% width resolves against that.

In the last case, the percentage is attempting to resolve against an indefinite size (because while the max-height is definite, the height is not). And such percentages do not resolve; the percentage height is thrown out and treated as the initial value, auto. Meanwhile the width resolves against the float's width, which is clamp(min-content, CB, max-content) = max-content of the image = 32px.