子元素溢出时如何调整父元素的大小，但没有时保持大小？

Question

我一直在为此烦恼。 假设我想要一个div有背景颜色并覆盖整个页面，所以我将它的高度设置为 100vh。 如果我一开始在里面添加固定大小的元素会很好，但最终它会开始溢出父容器。

下面是一些示例代码：

<!-- index.html -->
  <div class="parent-box">
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
    <div class="child-box"> Child box</div>
  </div>

// style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent-box {
  background-color: pink;
  width: 20%;
  height: 20vh;
  margin: 2em auto;
}
.child-box {
  background-color: lightblue;
  width: 3em;
  height: 3em;
  margin: auto;
}

结果：代码 output

基本上，我在问如何保持父元素的默认大小相同，同时在溢出时允许它变大。

Answer 1

我认为最好的选择是min-height: 100vh而不是 height: 100vh