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
<rdar://problem/94317884>
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.