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
Keywords: InRadar
Depends on:
Reported: 2022-05-26 16:26 PDT by Jason Pickens
Modified: 2022-06-02 16:27 PDT (History)
4 users (show)

See Also:


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>
      .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;
    <div class="page-grid">
      <!-- This div with no styles is required for the bug -->
        <div class="inner-grid">
          <div>this should stretch</div>

Comment 1 Radar WebKit Bug Importer 2022-06-02 16:27:12 PDT