如何使用Flexbox让换行后的溢出子元素显示滚动条？

要实现第二个子元素换行后高度与父容器一致、内容溢出时显示滚动条的效果，需要调整Flexbox布局属性，避免给子元素设置固定高度，通过Flex特性约束高度：

修改后的代码 #

CSS代码 #

.dialog {
  background-color: cyan;
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.left {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

.right {
  width: 400px;
  height: 100%;
  background-color: pink;
  overflow-y: auto;
  flex-basis: 100%;
}

HTML代码 #

<div class="dialog">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

关键调整说明 #

• 给.right添加flex-basis: 100%，确保它换行后独占一行宽度；
• 移除.right的固定高度，设置height: 100%，让它继承父容器的高度；
• 父容器设置align-content: flex-start，避免换行后的行被异常拉伸；
• 用overflow-y: auto替代scroll，仅在内容溢出时显示滚动条，提升交互体验。

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