csswg-drafts (original) (raw)

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."