为什么当内部网格扩展时 Chrome 不扩展外部网格

Question

我有一个用大写 G Grid 样式制作的嵌套网格布局。在嵌套网格中有一个设置为 100% 宽度的图像，这会导致其高度按比例增长，并且其直接父网格会垂直扩展。但是，在 Chrome 中，祖父网格不会增长。

我已经模拟了这里的情况：https://codepen.io/anon/pen/vpEVZj?editors=1100

第一个 .single-grid 显示正常，但第二个 .outer-grid 不显示。

这是 Chrome 中的错误还是我遗漏了什么？

编辑：今天，无论是演示还是我的应用程序都没有显示这个问题。也许这只是一个大问题。

Answer 1

不确定原因是什么，但您可以通过将 grid-template-columns: auto 更改为 1fr 在 Chrome 中获得预期的行为：

.outer-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* ... */
}