| Summary: | Baseline alignment in nested grids breaks flex column width | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jason Pickens <jasonpickensnz> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 15 | ||
| Hardware: | All | ||
| OS: | All | ||
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. |
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