CSS弹性列内响应式图片实现疑问：子元素为何需设置overflow:auto

嘿，这个问题我太懂了！我来给你拆解一下为什么overflow: auto在这里是让布局正常工作的关键，其实核心和**块级格式化上下文（BFC）**以及弹性布局的尺寸计算规则有关。

先回顾下你的布局目标：

• 两张图片垂直堆叠，完全适配视口高度，绝不溢出
• 图片能自适应缩放（不管是缩小还是放大），同时保持比例不扭曲
• 用100%高度而非100vh来适配移动端

你的代码逻辑大体是对的：给html、body、.flex-parent都设了height: 100%，让弹性容器占满视口；.flex-child用flex: 1 1 0平分容器空间，图片用object-fit: contain保持比例。但为什么必须给.flex-child加overflow: auto呢？

关键原因：弹性子项的尺寸约束问题 #

当.flex-child的overflow默认是visible时，浏览器会把它当成一个“无约束”的容器：

• 图片设置了height: 100%，但这个100%的参照是父元素.flex-child的高度
• 可.flex-child作为弹性子项，它的高度原本是由flex: 1分配的，但如果内部图片的固有尺寸比分配的空间大，overflow: visible会让浏览器认为“这个子项需要容纳整个图片的原始尺寸”，导致.flex-child被图片撑开，超出原本分配的空间，最终整个.flex-parent就会溢出视口。

而当你给.flex-child加上overflow: auto（或者hidden、scroll这类非visible的值）时，会触发一个重要的特性——创建块级格式化上下文（BFC）。BFC的核心作用之一就是：

约束内部元素的尺寸，内部元素的高度和宽度不会超出BFC容器的边界

这时候.flex-child会严格遵守flex: 1分配给它的高度，图片的height: 100%就会以这个固定高度为基准，再配合object-fit: contain自动缩放图片，保持比例，既不会撑开父元素，也能填满可用空间（或者在图片太大时缩小适配）。

补充验证 #

你可以试试把overflow: auto换成overflow: hidden，效果是一样的——只要不是visible，就能触发BFC，达到约束尺寸的目的。auto只是在内容真的超出时显示滚动条，但这里因为object-fit: contain会自动缩放图片，所以实际上不会出现滚动条，只是刚好满足了BFC的触发条件。

你之前单独调object-fit: contain没用，就是因为父容器.flex-child没有形成尺寸约束，图片只能跟着自己的固有尺寸走，自然达不到自适应的效果。

附上你的完整代码方便参考：

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }
    html {
      height: 100%;
    }
    body {
      font-family: Verdana, sans-serif;
      font-size: 0.8em;
      height: 100%;
    }
    .flex-parent {
      display: flex;
      flex-direction: column;
      color: black;
      gap: 8px;
      height: 100%;
    }
    .flex-child {
      flex: 1 1 0;
      align-self: center;
      overflow: auto;
    }
    .image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div class="flex-parent">
    <div class="flex-child">
      <img draggable="false" class="image" src="https://dummyimage.com/600x400/0010ee/fff">
    </div>
    <div class="flex-child">
      <img draggable="false" class="image" src="https://dummyimage.com/600x400/0010ee/fff">
    </div>
  </div>
</body>
</html>

备注：内容来源于stack exchange，提问作者Jean-yves Leseigneur