css - 为什么 Chrome 在内部网格扩展时不扩展外部网格

Question

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

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

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

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

编辑:今天，演示和我的应用程序都没有显示这个问题。也许这只是一个 humpday 问题。

Answer 1

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

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