Flex布局如何实现同容器内一项拉伸高度另一项溢出滚动

一、双Flex子项差异化需求可完全通过Flexbox实现 #

你要的效果可以实现，核心思路是给第二个需要滚动的子项做绝对定位约束，避免它的内容撑开父容器，同时让它的高度自动匹配父容器由第一个子项撑开的实际高度，修改后代码如下：

<div style="display: flex; background: #f1f1f1; min-height: 100vh; position: relative;">
  <!-- 第一个子项：自动撑开自身和父容器 -->
  <div style="width:50%; margin:10px;background: aliceblue">
    1<br>1<br>1<br>1<br>... 新增内容时会自动拉伸自身高度，同时撑开父容器
  </div>
  <!-- 第二个子项外层：作为高度锚点，自身高度会自动和父容器同步 -->
  <div style="width:50%; margin:10px; position: relative;">
    <!-- 第二个子项内容层：绝对定位撑满外层，超出自动滚动 -->
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: antiquewhite; overflow: auto;">
      2<br>2<br>2<br>2<br>... 内容超出父容器高度时自动显示滚动条
    </div>
  </div>
</div>

实现原理： #

• Flex容器默认align-items: stretch，所以两个外层子项的高度默认都会和父容器的实际高度保持一致
• 第一个子项没有额外高度约束，内容增加时会自然撑开自身高度，进而拉高父容器高度
• 第二个子项的内容层用绝对定位完全贴合外层锚点的尺寸，设置overflow: auto后内容超出就会自动出现滚动条，不会撑开外层容器

二、子项超出容器边框的实现方法 #

可以实现，常见实现方式有两种：

• 给子项设置flex-shrink: 0，同时子项的内容高度/自定义高度大于父容器的固定高度时，子项就会自动溢出容器边框，父容器如果没有设置overflow: hidden的话，溢出内容会直接显示在容器外
• 不需要Flex规则的话，直接给子项设置比父容器更大的固定高度，或者子项内容高度超过父容器，父容器不设置溢出隐藏，也能实现超出效果
  示例代码：

<div style="display: flex; height: 200px; background: #f1f1f1; width: 400px;">
  <div style="flex-shrink: 0; height: 300px; width: 200px; background: aliceblue;">
    我高度300px，父容器只有200px，我会超出父容器底部边框
  </div>
  <div style="width: 200px; background: antiquewhite;">
    正常高度的子项
  </div>
</div>

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