Chrome中CSS Subgrid存在高度不收缩的Bug？

看起来你遇到的确实是Chrome目前对CSS subgrid高度计算的一个已知兼容性问题，并不是你的代码写错了哦！

你描述的现象很明确：当给使用subgrid的.sub容器设置max-height和overflow: scroll后，外层的.wrapper网格在Firefox和Safari中会正常收缩到合适的高度，但Chrome里却会被.sub容器的完整内容高度撑开，完全忽略了max-height的限制。

先把你的复现代码整理一下，方便大家查看：

HTML代码 #

<div class=outer>
  <div class=wrapper>
    <span>Foo</span>
    <span>Bar</span>
    <span>Foo</span>
    <span>Bar</span>
    <div class=sub>
      <span>Sub1</span>
      <span>Sub2</span>
      <span>Foo</span>
      <span>Bar</span>
      <span>Foo</span>
      <span>Bar</span>
    </div>
  </div>
</div>

CSS代码 #

.wrapper {
  display: grid;
  grid-template-columns: auto auto;
  background: blue;
  overflow: scroll;
  max-width: 10rem;
  border: 2px solid red;
}

.wrapper span {
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 0.3em 1em;
}

.sub {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  max-height: 3rem;
  overflow: scroll;
  background: gray;
}

目前Chrome对subgrid的高度计算逻辑还没有和Firefox、Safari完全对齐，这类布局差异属于浏览器实现上的bug，你可以放心，你的代码写法是符合CSS规范的。如果需要临时解决这个问题，你可以尝试给.wrapper也设置一个明确的max-height，或者用其他布局方式（比如嵌套普通grid而非subgrid）作为临时替代方案，直到Chrome修复这个兼容性问题。

备注：内容来源于stack exchange，提问作者Verim