Chrome 中的 CSS 子网格错误？

Question

我有一个带有子网格的 CSS 网格。如果我限制子网格的高度，原始网格的高度不会缩小。这仅适用于 Chrome。 Firefox 和 Safari 按预期工作。

这是我的最小复制代码的Codepen。我是不是做错了什么，或者这确实是 Chrome 中的一个 Bug？！

.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;
}

<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>

Answer 1

我刚刚获得了新的 Chrome 版本，似乎该错误已得到修复。 121.0.6167.184 和 122.0.6261.57 之间的某个位置。

Answer 2

如果它在其他版本中有效，但在没有更改代码的情况下在 Chrome 中失败，我想这是一个错误。如果您无法找到使用网格的解决方案，我建议改用 Flex - 下面的示例展示了如何将实现调整为 Flex。

此外，任何使用基于 Windows 的浏览器的用户都会在代码示例中看到可怕的滚动条，从而使该界面完全无法使用。您将需要在这种情况下测试您的输出 - 使用溢出：自动而不是溢出：滚动也会阻止它呈现不必要的滚动条（自动只会在内容溢出时引入滚动条，而滚动始终显示水平和垂直滚动条）

.wrapper {
  display: flex;
  flex-wrap: wrap;
  background: blue;
  overflow: scroll;
  max-width: 10rem;
  border: 2px solid red;
}

.wrapper span {
  display: block;
  box-sizing: border-box;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 0.3em 1em;
  width: 50%;
}

.sub {
  display: flex;
  flex-wrap: wrap;
  max-height: 3rem;
  overflow: auto;
  background: gray;
}

<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>