Flex行布局子元素填充父级高度，Chrome下右侧容器滚动异常

这确实是Chrome和Firefox在flex容器高度计算上的典型差异！你观察得很准确——Chrome在这里的处理逻辑和Firefox不同：当flex容器设置了height:100%但缺乏明确的父级高度约束时，它不会将这个100%视为固定高度限制，反而会让容器跟随内容高度拉伸，最终导致右侧容器超出屏幕范围。而Firefox则更严格地遵循flex布局规范，会把height:100%作为容器的最大高度来约束子元素。

修复方案 #

要实现左侧固定、右侧内容过长时滚动的效果，我们需要做两个关键调整：

1. 确保根元素有明确的高度约束
   height:100%是依赖父级高度生效的，所以需要给html和body设置高度，消除默认边距：

   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   

2. 给右侧子容器添加滚动约束
   给右侧flex子元素设置min-height:0（打破Chrome默认的min-height:auto行为），同时加上overflow-y:auto实现滚动：

   <div style="display: flex; flex-direction: row; height: 100%;">
     <div style="width:250px; background: #f0f0f0;">左侧固定容器</div>
     <div style="flex:1; height:100%; min-height:0; overflow-y: auto; background: #e0e0e0;">
       <!-- 超长内容示例 -->
       <div style="height: 2000px;">这里是右侧可滚动的超长内容...</div>
     </div>
   </div>
   

关键原理说明 #

• min-height:0：Chrome中flex子元素默认的min-height:auto会让子元素优先适应自身内容高度，忽略父级的height:100%限制。设置min-height:0后，子元素会强制遵守父容器的高度约束。
• overflow-y:auto：当内容超出容器高度时自动显示垂直滚动条，内容未超出时则隐藏，保持布局美观。

这样修改后，布局在Chrome和Firefox中都会表现一致：左侧容器固定不动，右侧容器内容过长时可滚动。

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