html - 可滚动的子级和不可滚动的父级

Question

假设有这样的事情:

<div class="parent">
 <div class="child">
 </div>
</div>

如何让parent占据整个屏幕高度？

如果 child 的高度超过父级高度(即屏幕最大高度)，如何使其可滚动。

我试过这样的:

.parent{
  height: 100vh;
 }

.child{
 overflow: auto;
 }

Answer 1

将溢出规则应用于父 div，请参见下面的工作示例:

html, body {
 height: 100%;
 margin: 0;
 font-family: sans-serif;
}
.parent {
  overflow: auto;
  height: 100vh;
  padding: 10px;
  border: 1px solid #ccc;
}
.child span {
  height: 100vh;
  display: block;
  background: gray;
  padding: 10px
}

.child span:nth-child(odd) {
  background: lightgray
}

<div class="parent">
 <div class="child">
  <span>Child container 1</span>
  <span>Child container 2</span>
  <span>Child container 3</span>
 </div>
</div>