Bug 179197 – Flexbox containing center-aligned grid misaligns

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Ezekiel Elin]

Created attachment 325765 [details]
Example HTML file

Creating a vertical flex box (flex-direction: column) with two children, one a grid and one other element, with the grid set to grow (flex-grow: 1).

With this configuration no inconsistencies appear. The second element takes up the space it needs at the bottom of the page, and the first (grid) element takes up the remaining top portion.

However, telling the grid to align items to center (align-items: center), differences appear. Safari centers further down, appearing to center within the containing element, not within the grid element. Firefox and Chrome do not exhibit this behavior.

An example file is included demonstrating the differences.

I have indicated my operating system and hardware. I have not tested it on other devices.

Safari: https://i.imgur.com/S38vIhS.png
Chrome: https://i.imgur.com/9u4rM2Y.png
Firefox: https://i.imgur.com/tMLoviA.png

[Ezekiel Elin]

Created attachment 325766 [details]
Example HTML File

Correcting an error in the original attachment

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.