Chrome Dev 95中Flexbox父容器内元素异常表现咨询——图片尺寸收缩问题及跨浏览器对比

Hey Edward, 我来帮你搞定Chrome 95里这个Flexbox图片收缩的问题，顺便唠唠Firefox里的表现~

问题核心原因 #

你遇到的这个现象，是Flex容器的默认规则和图片作为替换元素的特性共同导致的：

• Flex项目默认自带flex-shrink: 1属性，意思是当容器空间不够时，项目会自动收缩来适配容器宽度。
• 虽然你给图片设置了width: 100%; height: 100%;，但图片是替换元素，它的固有尺寸会参与Flex布局的计算。当Flex容器（.tournament__map.multiply）是横向排列且空间不足时，所有图片会因为相同的收缩比例，最终被挤成一样的宽度。
• 另外你给图片加了display: flex属性，这会让图片变成flex容器——对于替换元素来说，这个设置意义不大，反而会干扰浏览器对它尺寸的正常计算，加剧异常表现。

快速修复建议（附赠） #

如果要让图片按预期填满空间，可以试试这几个方案：

• 禁止图片收缩：给.map__banner添加flex-shrink: 0，强制它保留设置的宽度：

  .map__banner {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
  }
  

• 允许换行：给Flex容器添加flex-wrap: wrap，让图片在空间不足时自动换行：

  .tournament__map.multiply {
    flex-wrap: wrap;
  }
  

• 移除多余属性：删掉图片的display: flex，让它回归替换元素的正常盒模型行为。

Firefox中的表现情况 #

Firefox在Flex布局对替换元素的处理上，和Chrome 95有一些细微差异：

• 新版本Firefox会更严格遵守图片的width: 100%设置，默认情况下不会轻易让图片收缩——但如果容器空间严重不足，还是会触发收缩，只是触发的阈值和Chrome不同。
• 如果你给图片加上flex-shrink: 0，Firefox和Chrome的表现会完全一致，图片都会保持设置的宽度，不会被压缩。
• Firefox对替换元素的盒模型处理更贴近标准，即使你保留display: flex，它的渲染也会比Chrome更稳定，但依旧不建议给图片设置这个属性。

你的代码参考 #

CSS代码

.tournament__grid { 
  width: 100%; 
  margin-top: 40px; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  grid-template-rows: auto; 
}
.grid__map { 
  height: 340px; 
  display: flex; 
  flex-direction: column; 
}
.tournament__map { 
  height: 100%; 
  padding: 10px; 
  &.multiply { 
    display: flex; 
    flex-direction: row; 
    padding: 0; 
    .map__banner { 
      position: relative; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      @include fontSize(24); 
      font-weight: bold; 
      text-decoration: underline; 
      background: $mainBlack; 
      object-fit: cover; 
      object-position: center; 
    } 
  } 
}

HTML结构（整理后）

<div class="tournament__grid">
  <div class="grid__map">
    <div class="map tournament__map multiply">
      <img class="map__banner" src="https://source.unsplash.com/random/?paris">
      <img class="map__banner" src="https://source.unsplash.com/random/?paris">
      <img class="map__banner" src="https://source.unsplash.com/random/?paris">
      <img class="map__banner" src="https://source.unsplash.com/random/?paris">
      <!-- 剩余7张.map__banner -->
      <div class="map__gradient"></div>
      <div class="map__strip"></div>
      <p>Lorem Ipsum</p>
    </div>
  </div>
  <div class="grid__column"></div>
  <div class="grid__column"></div>
  <div class="grid__column"></div>
</div>

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