User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Steps to reproduce: 1. Open the following jsFiddle demo with Firefox: http://jsfiddle.net/qf15s3zv/3/. There are three containers (one Flex container and two Grid containers) with two adjacent items in each. Each item has a header inside that is set to display: inline-block. 2. Compare the vertical alignment of the two adjacent items in the three containers (one Flex container and two Grid containers). Actual results: In the second example, the items are aligned by the top instead of the baseline. Expected results: In all three examples, both items should be aligned by their (first) baseline, which is the last line of the text in the inline-block header because the content of their first line is the inline-block element. Chrome and Edge render this example as expected.
For some unclear reason, setting the block element *inside* the inline-block the definite width which is not larger than the container width fixes the alignment of the items (the third example). Unfortunately, percentage widths don't have this effect. I hope this helps to find the cause of the issue.
I managed to reproduce this issue on Nightly 63.0a1 (2018-07-26), Firefox 62.0b11 and Firefox 61.0.1, on Windows 10, Ubuntu 16.04 and Mac OSx.
Status: UNCONFIRMED → NEW
status-firefox61: --- → affected
status-firefox62: --- → affected
status-firefox63: --- → affected
Component: Untriaged → Layout: Block and Inline
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Version: 61 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.