Bug 240988
| 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 | ||
Jason Pickens
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
<rdar://problem/94317884>
Ahmad Saleem
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.