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

Question

我想禁用 .content div 上的滚动。并且仅在 .nav div 溢出时启用滚动 ..

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 将具有它的 child 的高度，但是强制它具有特定的高度，它会做你想做的，只需添加 height: 80vh;或者你想要的任何高度，到你的 .content 类