Bug 240988 - Baseline alignment in nested grids breaks flex column width
Summary: Baseline alignment in nested grids breaks flex column width
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-26 16:26 PDT by Jason Pickens
Modified: 2022-06-02 16:27 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Jason Pickens 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
Comment 1 Radar WebKit Bug Importer 2022-06-02 16:27:12 PDT
<rdar://problem/94317884>