Bug 240988

Summary: Baseline alignment in nested grids breaks flex column width
Product: WebKit Reporter: Jason Pickens <jasonpickensnz>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   
Attachments:
Description Flags
WebKit ToT vs Chrome Canary vs Firefox Nightly - Reference Screenshot none

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
WebKit ToT vs Chrome Canary vs Firefox Nightly - Reference Screenshot (580.73 KB, image/png)
2026-02-04 22:16 PST, Ahmad Saleem 		no flags
Details
View All 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.
Ahmad Saleem
Comment 3 2026-02-04 22:16:16 PST
Created attachment 478257 [details] WebKit ToT vs Chrome Canary vs Firefox Nightly - Reference Screenshot
Ahmad Saleem
Comment 4 2026-02-04 22:16:30 PST
All browsers are matching.
Note You need to log in before you can comment on or make changes to this bug.