Flex布局与普通布局下子元素overflow表现差异的原因

两种场景下滚动条生效逻辑不同，本质是普通文档流和Flex布局的高度计算、剩余空间分配规则完全不同。首先要明确overflow属性的生效前提：元素自身必须有明确的高度约束，不能是完全随内容自适应的height: auto状态，否则浏览器会认为元素高度和内容高度一致，不存在“溢出”的判定基础。 #

普通文档流（未开启Flex）下滚动条失效的逻辑 #

你给父容器设置了固定height: 100px，但普通块级布局没有自动给子项分配剩余空间的机制：

• 子项item1、item2都是普通块级元素，默认height: auto，高度完全由自身内容撑开
• item2虽然配置了overflow: auto，但本身没有任何高度限制，浏览器计算它的尺寸时会直接适配内部文本的总高度，对item2来说不存在内容超出自身高度的情况，自然不会触发滚动条
• 最终item2的总高度超过父容器设定的100px，而父容器默认overflow: visible，溢出内容直接向外显示，视觉上就像容器被内容撑开了（实际上父容器本身的几何高度还是你设定的100px）
  对应实现代码：

.container {
  width: 300px;
  height: 100px;
}

.item1 {
 color: white;
 background-color: black;
}

.item2 {
  color: white;
 background-color: brown;
 overflow: auto;
}

<div class="container">
  <div class="item1">
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
   </div>
   <div class="item2">
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
   </div>
</div>

如果想在非Flex布局下让item2的滚动条正常工作，只需要给item2增加明确的高度约束即可，比如手动设置max-height、用calc计算高度，或者改用Grid布局自动分配剩余高度。 #

Flex布局下滚动条正常生效的逻辑 #

当父容器设置display: flex; flex-direction: column成为纵向Flex容器后，布局规则发生了本质变化：

• Flex容器会主动管控所有子项的尺寸，默认子项的flex-shrink值为1，也就是当所有子项的总高度超过容器高度时，子项会自动收缩适配容器尺寸
• 当子项设置了overflow值为auto/scroll/hidden（非默认的visible）时，Flex布局计算尺寸时不会让该子项被内部内容无限撑高，而是会把容器扣除item1固有内容高度后的剩余空间，全部分配给item2作为它的实际高度
• 此时item2有了明确的高度约束，内部文本长度超过分配到的高度时，就会触发overflow: auto的规则显示滚动条，整个容器也会严格保持你设定的100px固定高度
  对应实现代码：

.Flex_container {
  width: 300px;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.item1 {
 color: white;
 background-color: black;
}

.item2 {
 color: white;
 background-color: brown;
 overflow: auto;
}

<div class="Flex_container">
  <div class="item1">
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ei </p>
   </div>
   <div class="item2">
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accug elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et at.</p>
   </div>
</div>

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