如何将Div最大高度限制为5个子元素高度，超出时显示滚动条

要达到你要的效果，直接用CSS Grid就能搞定，让容器高度固定为5个子元素的总高度，超过5个就显示滚动条。具体代码修改如下：

修改后的CSS #

.box {
  border: 1px solid black;
  display: grid;
  width: 150px;
  /* 固定容器为5行，每行高度自适应子元素 */
  grid-template-rows: repeat(5, auto);
  /* 内容溢出时显示垂直滚动条 */
  overflow-y: auto;
}

/* 可选：去掉p标签默认的上下外边距，避免高度计算有偏差 */
.item {
  margin: 0;
}

对应HTML（无需修改） #

<div class="box">
  <p class="item">1 test</p>
  <p class="item">2test test    test test    test test</p>
  <p class="item">3test</p>
  <p class="item">4test</p>
  <p class="item">5 test</p>
  <p class="item">6 test</p>
</div>

原理说明 #

• 用grid-template-rows: repeat(5, auto)让容器高度刚好匹配5个子元素的实际高度，不管每个子元素是一行还是多行文本。
• 开启overflow-y: auto后，当子元素数量超过5个，容器会保持现有高度，多余的内容通过滚动条查看。
• 去除.item的默认外边距是为了消除浏览器默认样式对容器高度的影响，让高度计算更精准。

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