具有100％高度和显示的div：网格不会做我期望的

我所需的布局是HTML主体中具有50％高度（50vh）和宽度的箱体中心，具有两个相等宽度的列，并且如果内容在任一列变得比它自己的高度大，一个垂直滚动条被显示。具有100％高度和显示的div：网格不会做我期望的

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

我不明白为什么。我在说#gridContainer的父母#flexContainer的身高为100%。所以不应该给#col1一个高度100%它是否匹配它的父母#gridContainer？

我注意到，如果我在#gridContainer选择改变display: grid到display: block，我将获得垂直滚动条我是否会#col1的height: 100%规则与否。

这是关于如何与css网格与我没有得到的高度CSS属性交互？

那么你想要做什么？ –

我说我想要的第一段。我可以在＃col1中省去100％的高度，这似乎具有我想要的效果，但我不知道为什么这会起作用。所以我想知道发生了什么事。 –

所以你想知道滚动部分是如何完成的？在第一个列...我是对的 –

你已经设定了50％的父母高度，在此之下，你的col1有50％的身高。所以你的CSS

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

你的部门有50％的高度，你已经使用overflow:scroll所以每当相比于母公司的内容大小铁道部增加超过50％，则滚动条appers。这一切都在这里。

2017-09-06 02:02:13

如果你想第二个是相同的只是使用'''overflow：scroll' ''看看这个：https://jsfiddle.net/mxubxpn7/ –

是的，但取消了高度：100％。如果你做的滚动条没有出现。那是我感到困惑的。 –

正在使用'''height：200px;'''。我认为该div是全身100％可能有一些原因，因为你已经使用flex所以它只是开箱 –

回答