如何让父元素在子元素溢出时自适应扩容，无溢出时保持原尺寸？

问题核心在于你给父元素设置了固定高度（比如height: 100vh或示例中的20vh），这会强制容器保持该高度，当子元素总高度超过容器高度时就会溢出。要实现「无溢出时保持默认尺寸，溢出时自动扩大」的需求，只需要把固定高度替换为最小高度即可。

修改后的代码示例 #

HTML（无需改动）

<!-- 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>

CSS（关键修改：用min-height替代height）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent-box {
  background-color: pink;
  width: 20%;
  /* 替换固定height为min-height，设置最小高度下限 */
  min-height: 20vh;
  margin: 2em auto;
}
.child-box {
  background-color: lightblue;
  width: 3em;
  height: 3em;
  margin: 1em auto; /* 增加垂直间距，更直观展示效果 */
}

原理说明 #

• height是强制固定容器高度，无论内容多少，容器都不会扩展
• min-height是设置容器的最小高度阈值：当子元素总高度小于该值时，容器保持最小高度；当子元素总高度超过阈值时，容器会自动被内容撑开，完全包裹所有子元素

如果你的实际需求是「无内容时父元素占满整页（100vh），有内容溢出时自动增高」，只需要把父元素的height: 100vh改成min-height: 100vh即可实现。

内容的提问来源于stack exchange，提问作者Cristhian Suriel