CSS Flex行布局：第二项超首项高度时自动纵向滚动 无需固定容器高度

核心问题根源 #

Flex布局有两个叠加导致问题的默认规则：

1. 所有Flex子元素的min-height默认值为auto，即子元素的最小高度会被自身实际内容撑开。
2. 横向Flex布局下，子元素默认允许被Flex容器按剩余空间占比压缩。

这两个规则组合后，哪怕给需要滚动的子元素设置了overflow-y: auto，只要不给Flex容器设置固定高度，整个容器会跟着第二列的长内容被同步撑高，永远不会触发滚动截断逻辑。

关键修改点 #

不需要给Flex容器设置任何固定高度，仅需补充两个核心CSS规则即可实现需求：

• 给作为高度基准的第一列子元素（对应示例中的.box1）添加flex-shrink: 0，禁止Flex布局压缩该元素的自然高度，保证整个Flex行的高度完全匹配该元素的实际内容高度。
• 给需要滚动的第二列子元素（对应示例中的.box2）添加 min-height: 0，打破默认的最小高度被内容撑开的规则，让第二列的高度受限于Flex容器的实际高度，当内部内容超出当前高度时，自动触发纵向滚动。

修改后的完整代码 #

.container{
  border: 1px solid black;
  display: flex;
}

.box { width: 300px; color:#fff; }
.box1 { 
  background:blue; 
  height: 100px;
  flex-shrink: 0;
}
.box2 { 
  background:red; 
  overflow-y: auto;
  min-height: 0;
}

原有HTML结构无需做任何调整，保持原写法即可：

<div class="container">
  <div class="box box1">Item with some height</div>
  <div class="box box2">
    Some details (should scroll vertically if larger than left box)
    <br/> content1<br/> content2<br/> content3
    <br/> content4<br/> content5<br/> content6
    <br/> content7<br/> content8
  </div>
</div>

补充说明

1. 该方案依赖Flex布局默认的align-items: stretch规则，第二列子元素会自动拉伸到和Flex容器同等高度，无需手动设置高度值。如果手动修改了Flex容器或子元素的align-items取值，需要额外给第二列滚动元素设置height: 100%，保证高度和基准列匹配。
2. 如果第一列子元素的高度是动态变化的（比如包含未固定尺寸的图片、动态加载的文本），该方案同样生效——第一列的高度变化会实时带动Flex容器的高度同步调整，第二列的滚动区域高度会自动跟随匹配，无需额外写JS做高度联动计算。

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