[Webkit-unassigned] [Bug 240988] New: Baseline alignment in nested grids breaks flex column width

Thu May 26 16:26:20 PDT 2022

https://bugs.webkit.org/show_bug.cgi?id=240988

            Bug ID: 240988
           Summary: Baseline alignment in nested grids breaks flex column
                    width
           Product: WebKit
           Version: Safari 15
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jasonpickensnz at gmail.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220526/12d368be/attachment.htm>