含Subgrid的CSS Grid在Safari中设置overflow:auto失效问题

我正在构建嵌套CSS Grid布局并使用Subgrid，为子网格设置overflow:auto属性后，布局在Safari中完全失效，但Chrome和Firefox运行正常。移除overflow:auto后Safari可正常显示，但我需要该属性实现网格主体区域的滚动效果，请问是什么原因导致Safari出现此问题？

示例代码 #

CSS #

.main-grid {
    height: 100px;
    width: 500px;
    display: grid;
    grid-template-columns: minmax(4ch, 1fr) minmax(4ch, 1fr) minmax(min-content, 1fr);
    grid-template-rows: auto 1fr;
}

.sub-grid-1 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}

.sub-grid-2 {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: minmax(30px, 10%);
    grid-column: 1/-1;
    background-color: blue;
    overflow: auto;
}

.sub-sub-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: subgrid;
    grid-column: 1/-1;
    background-color: yellow;
    border: 1px solid black;
}

HTML #

<div class="main-grid">
   <div class="sub-grid-1">     
      <span>Header 1</span>
      <span>Header 2</span>
      <span>Header 3</span>
   </div>
   <div class="sub-grid-2">
      <div class="sub-sub-grid">
         <span>1</span>
         <span>2</span>
         <span>3</span>
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
      <div class="sub-sub-grid">
         Row
      </div>
   </div>
</div>

效果对比 #

• Safari：布局失效，无法正常显示滚动区域和网格结构
• Chrome/Firefox：布局正常，网格主体区域可滚动，列对齐正确

这是Safari对Subgrid和overflow属性组合的兼容性bug。当为使用subgrid的网格容器设置overflow:auto时，Safari无法正确计算子网格的尺寸和对齐关系，导致网格布局崩溃。

具体来说，Safari在处理带有overflow的subgrid容器时，没有正确继承父网格的轨道定义，反而将容器视为独立的块级元素，破坏了原本的子网格对齐逻辑。

可以通过在sub-grid-2内部添加一个额外的滚动容器，将overflow:auto转移到这个容器上，同时让原sub-grid-2继续保持subgrid的列对齐功能：

修改后的CSS：

.main-grid {
    height: 100px;
    width: 500px;
    display: grid;
    grid-template-columns: minmax(4ch, 1fr) minmax(4ch, 1fr) minmax(min-content, 1fr);
    grid-template-rows: auto 1fr;
}

.sub-grid-1 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
}

.sub-grid-2 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
    background-color: blue;
}

.scroll-container {
    overflow: auto;
    height: 100%;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
    grid-auto-rows: minmax(30px, 10%);
}

.sub-sub-grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: subgrid;
    grid-column: 1/-1;
    background-color: yellow;
    border: 1px solid black;
}

对应的HTML修改：

<div class="main-grid">
   <div class="sub-grid-1">     
      <span>Header 1</span>
      <span>Header 2</span>
      <span>Header 3</span>
   </div>
   <div class="sub-grid-2">
      <div class="scroll-container">
          <div class="sub-sub-grid">
             <span>1</span>
             <span>2</span>
             <span>3</span>
          </div>
          <!-- 其他sub-sub-grid元素保持不变 -->
      </div>
   </div>
</div>

这样调整后，sub-grid-2依然继承父网格的列定义，滚动逻辑由内部的scroll-container承担，Safari就能正确渲染布局并实现滚动效果。

内容的提问来源于stack exchange，提问作者ron