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."
SelenIT, jonjohnjohnson and hua-lu
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.5