Flex子项超出容器边界：如何为Flex子项内的容器添加滚动条？

要实现你要的效果，核心是限制第二个flex子项的高度范围，让它仅占用容器剩余空间，再让内部的滚动容器填满该子项的可用区域，具体操作如下：

• 给第二个container-item添加样式：flex: 1; display: flex; flex-direction: column;，让它自动填充容器的剩余高度，同时内部元素也按列布局
• 给scrollable容器加上flex: 1，让它填满父项的剩余空间，配合overflow: auto，内容超出时自动显示滚动条
• 确保外层flex容器有明确高度（比如把max-height改为height，或保证父元素有确定高度），这样flex布局才有明确的空间参考

修改后的完整代码：

CSS #

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
  border: 1px solid red;
}

.container-item:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scrollable{
  flex: 1;
  overflow: auto;
}

HTML #

<div class="container">
  <div class="container-item">Lorem ipsum</div>
  <div class="container-item">
    <div>Lorem, ipsum</div>
    <div class="scrollable"> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
  </div>
</div>

原理说明 #

原代码中第二个container-item没有高度限制，会跟着内部长文本自动撑开，导致整个flex容器超出设定高度。通过flex:1让它仅占用容器除第一个子项外的剩余空间，再将它设为flex容器，让内部scrollable填满该子项的可用高度，此时overflow:auto就能正常触发，内容超出时显示滚动条，同时整个flex容器不会被撑破。

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