1518715 - Baseline alignment of an inline-flex item breaks when overflow is specified (due to the anonymous box it creates?)

Status: VERIFIED DUPLICATE of bug 969874

(Core :: Layout: Flexbox, defect)

Description

[Cheng-You Bai [:cybai] UTC+9]

Attachment: overflow-y-inline-flex.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

While reading tweets on twitter, I found the "X" number of "X Likes" is not in the same line with "Likes".

For example, checking this tweet: https://twitter.com/intenttoship/status/1076808631125983232

The reduced test case is in the attatchment or here's a codepen for it: https://codepen.io/anon/pen/PXBjvK.

Actual results:

The number of likes is not in the same line with Likes.

Expected results:

The number should be in the same line with Likes.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Baseline alignment breaking when overflow is present looks something suspicious to me. Daniel, I recall some flexbox bug related to the scrollframe anon box as well, do you know if this is related?

Comment 2

[Daniel Holbert [:dholbert]]

This is likely bug 969874 (which got some spec text to clarify the expected result [and to clarify that "display:inline-block" is a special case that we shouldn't match here] in https://github.com/w3c/csswg-drafts/issues/2902 )

Comment 3

[Daniel Holbert [:dholbert]]

I can reproduce the bug at Twitter, too, but only if I go to mobile.twitter.com to force "new" twitter.

So, here's a more-reliably-reproducing URL:
https://mobile.twitter.com/intenttoship/status/1076808631125983232