[css-flexbox][css-grid] Spec doesn't say whether "overflow: [non-visible]" on flex/grid container triggers a different baseline (as it does for inline-block)

[dholbert]

In the CSS2 spec section about baselines of inline-blocks, there's a special case for overflow:[non-visible] (i.e. scrollable) inline-blocks, for which "the baseline is the bottom margin edge".[1]

The flexbox/grid specs don't have any such special case, so I'm left wondering whether they should implicitly behave like inline-blocks in this respect. The flexbox/grid specs do have some text about baselines of scrollable things[2], but I don't think it helps here -- if I'm understanding correctly, that text is about flex/grid items (it's about the box contributing a baseline to the flex/grid container, and cases where that box is scrollable).

Browsers disagree on this baseline-determination right now, so we don't have interoperability on this point (testcase: https://jsfiddle.net/06wxgroy/ ). Firefox uses the margin-bottom as the baseline (consistent with display:inline-block behavior), whereas Chrome, Edge, and Safari do not.

Could the spec editors or CSSWG weigh in on this and update the spec to clarify what the expected behavior is?

[1] https://drafts.csswg.org/css2/visudet.html#leading "The baseline of an 'inline-block' is ..., unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge."
[2] https://drafts.csswg.org/css-flexbox-1/#flex-baselines "When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline."

[fantasai]

AFAIK, that special case is not supposed to apply anywhere else, so the usual rules apply: last paragraph of https://drafts.csswg.org/css-align/#baseline-export

[fantasai]

Flagging css-align-3 to make sure we got the CSS2.1 compat clearly defined...

[dholbert]

so the usual rules apply: last paragraph of https://drafts.csswg.org/css-align/#baseline-export

Thanks -- that chunk of spec text does seem like the most relevant text that describes what should happen here (for inline-grid and inline-flex).

Having said that -- it seems quite weird that inline-block gets this special case of degenerate behavior, since inline-block is the easiest container in which to find/visualize the baseline, as compared to inline-grid and inline-flex. Is there a reason for this behavior difference between these containers? (Are we just in a case where we've decided CSS21 was silly/wrong to require this behavior, and we can't change it now, and we're trying to define newer containers to be smarter?)

[tabatkins]

Yeah, 2.1 was just silly to require this, basically.

[tabatkins]

(Flagging as WPT because your jsfiddle is an excellent test-case for the behavior.)

[tabatkins]

And to make things a little clearer, we've also imported the text from 2.1 that defines how inline-block synthesizes its baseline when its empty or a scroll container.

[tabatkins]

This look good, @dholbert?

[dholbert]

(Sorry, just saw your ping now.)

Yes, this looks great @tabatkins. Thanks!