NEW240988
Baseline alignment in nested grids breaks flex column width 
https://bugs.webkit.org/show_bug.cgi?id=240988
Summary Baseline alignment in nested grids breaks flex column width
Jason Pickens
Reported 2022-05-26 16:26:20 PDT
Setting `align-items: baseline` causes grid columns with flex units (.e.g `1fr`) to stop taking up the remaining width available. There are a couple of prerequisites for this to occur. The grid needs to be nested within another grid. There also needs to be another element between the two. Setting `align-items: center` works. Minimal reproduction: ``` <!DOCTYPE html> <html> <head> <style> .page-grid { display: grid; grid-template-rows: 1fr; } .inner-grid { display: grid; grid-template-columns: 1fr; align-items: baseline; border: solid; } .inner-grid div { border: dashed; } </style> </head> <body> <div class="page-grid"> <!-- This div with no styles is required for the bug --> <div> <div class="inner-grid"> <div>this should stretch</div> </div> </div> </div> </body> </html> ``` https://codesandbox.io/s/webkit-nested-grid-baseline-bug-w6cxcb
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-06-02 16:27:12 PDT
<rdar://problem/94317884>
Ahmad Saleem
Comment 2 2023-04-21 05:39:04 PDT
I am not able to reproduce this bug in Safari Technology Preview 168 and it stretches similar to Chrome Canary 114 and Firefox Nightly 114.
Note You need to log in before you can comment on or make changes to this bug.