为什么开启flex-wrap: wrap会导致包含大图片的Flex项高度异常？

问题成因 #

开启flex-wrap: wrap后出现的高度异常，是Flexbox交叉轴的默认规则和图片尺寸设置共同触发的连锁问题：

• 未开启换行时，单行布局下所有flex子项会在垂直方向（本案例的交叉轴）被默认拉伸到容器全高，图片设置的height:100%会绑定到这个被明确约束的子项高度，布局表现完全正常。
• 开启换行后，两个默认生效的Flexbox规则开始触发异常：
  1. align-content默认值为stretch：所有柔性行会被均分拉伸，占满容器100vh的总高度
  2. align-items默认值为stretch：行内的子项会被拉伸到对应柔性行的全高
• 由于图片设置了height:100%且没有设置高度上限，加上Flexbox在交叉轴方向默认不会对溢出内容做自动收缩，当图片自身的固有渲染高度超过分配的高度时，会反过来把整个柔性行撑得很高，最终表现为子项高度突然无限制变大。

修复方案 #

• 方案1：关闭默认的行拉伸行为（最直接有效）
  给flex容器增加align-content: flex-start配置，让柔性行按照内容固有高度排布，不再强行拉伸占满容器全高，从根源上切断“行被强制拉高→子项跟着拉高→图片撑高行”的连锁反应。
  修正后的容器CSS：

  .flex-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; /* 新增配置 */
  }
  

• 方案2：给图片增加高度上限，避免内容撑破布局
  给图片样式增加max-height: 100%约束，哪怕出现意外的高度拉伸，图片也不会无限制放大。如果需要保持图片原有比例，可将原有height:100%的写法替换为：

  .image {
    width: 100%;
    height: auto;
    max-height: 100%; /* 新增高度上限 */
    object-fit: contain;
  }
  

• 方案3：保留行拉伸效果的前提下关闭子项默认拉伸
  如果需要保留柔性行拉伸占满容器高度的效果，可给每个flex子项增加align-self: flex-start配置，让子项不再默认拉伸占满行高，此时图片的height:100%会绑定到子项自身的内容高度，不会出现无限撑高的问题：

  .flex-item1, .flex-item2 {
    align-self: flex-start; /* 新增配置 */
  }
  

内容的提问来源于stack exchange，提问作者Robert van Dijk