Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[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) #2902

Closed
dholbert opened this Issue Jul 10, 2018 · 8 comments

Comments

@dholbert
Copy link
Member

dholbert commented Jul 10, 2018

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

This comment has been minimized.

Copy link
Contributor

fantasai commented Jul 24, 2018

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

This comment has been minimized.

Copy link
Contributor

fantasai commented Jul 24, 2018

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

@dholbert

This comment has been minimized.

Copy link
Member Author

dholbert commented Jul 25, 2018

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

This comment has been minimized.

Copy link
Member

tabatkins commented Aug 9, 2018

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

@tabatkins

This comment has been minimized.

Copy link
Member

tabatkins commented Aug 9, 2018

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

@tabatkins tabatkins closed this in 566e348 Aug 9, 2018

@tabatkins

This comment has been minimized.

Copy link
Member

tabatkins commented Aug 9, 2018

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 comment has been minimized.

Copy link
Member

tabatkins commented Aug 9, 2018

This look good, @dholbert?

@dholbert

This comment has been minimized.

Copy link
Member Author

dholbert commented Aug 21, 2018

(Sorry, just saw your ping now.)

Yes, this looks great @tabatkins. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.