为什么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;
    /* ... */
}