为什么css溢出隐藏在这种情况下不起作用

Question

我想禁用.contentdiv上的滚动。并且只有在.navdiv溢出时才启用滚动。。

body{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.container {
min-height: 100vh;
width:100%;
display:grid;
grid-template-rows:60px 1fr;
}
.header {
background:white;
position:sticky;
top:0;
z-index:10;
box-shadow:0 2px 4px grey;
}
.content {
overflow:hidden;
display:grid;
grid-template-columns:200px 1fr 250px;
}
.nav {
background-color:white;
overflow-y:scroll;
}

CodePen链接：https://codepen.io/chandu0101/pen/dyyQEaR

Answer 1

因为.content将具有其子级的高度，但强制它具有特定的高度，所以它将执行您想要的操作，只需将height: 80vh;或您想要的任何高度添加到.content类中

Answer 2

divs将自动扩展以适应其内容。给.content一个高度或max-height，它将停止膨胀。

.content {
overflow:hidden;
display:grid;
grid-template-columns:200px 1fr 250px;
height: 200px; /* <-- */
}

Answer 3

由于您还没有为.nav定义高度，因此它会根据需要升高。为了限制高度，您可以将其设置为固定高度(在下面的代码中，它等于最大高度减去标头高度(。这样，您甚至不需要overflow-y: scroll，因为它是多余的。

为您的导航添加固定高度：

.nav {
height: calc(100vh - 60px);
}