高度为100％的div和显示：网格没有达到我的预期

Question

我想要的布局是HTML正文中的框中心，高度为50％（50vh）和宽度，两列宽度相等，如果任一列中的内容大于其自身高度，则会显示垂直滚动条。

我有以下fiddle。 display: grid div中的左列标识为#col1。我注意到的是，如果我将其高度设置为100%，那么它的高度将增长到适合其中的文本。

我不明白为什么。我说#gridContainer的父级100%高度为#flexContainer。那么，#col1的{​​{1}}高度是否应该与其父100%匹配？

我注意到，如果我在#gridContainer选择器中将display: grid更改为display: block，我将获得垂直滚动条，无论我是#gridContainer #col1还是height: 100%是否有规则。

这与css-grid如何与我没有得到的高度css属性进行交互有关吗？

Answer 1

您设置了50％的父级高度，在此之下，您的col1的高度为50％。 所以你的css

#col1 {
overflow: scroll;
width: 100%;
//height: 100%;
background-color: red;
}

你的师有50％的身高，你使用overflow:scroll所以每当内容大小比父母增加50％时，滚动条就会出现。多数人都在这里。