RESOLVED CONFIGURATION CHANGED 179197
Flexbox containing center-aligned grid misaligns 
https://bugs.webkit.org/show_bug.cgi?id=179197
Summary Flexbox containing center-aligned grid misaligns
Ezekiel Elin
Reported 2017-11-02 13:57:13 PDT
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
Attachments
Example HTML file (1.96 KB, text/html)
2017-11-02 13:57 PDT, Ezekiel Elin 		no flags
Details
Example HTML File (1.96 KB, text/html)
2017-11-02 13:58 PDT, Ezekiel Elin 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Ezekiel Elin
Comment 1 2017-11-02 13:58:10 PDT
Created attachment 325766 [details] Example HTML File Correcting an error in the original attachment
Brent Fulgham
Comment 2 2022-07-15 14:12:20 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.