Flex布局图片高度限制在Firefox生效，WebKit内核浏览器失效

在Firefox中，垂直flex容器内的图片能和文本一起适配容器高度，不会撑破容器；但在Brave、Safari等WebKit内核浏览器中，图片会超出容器范围，显示异常。

原始代码 #

HTML #

<div class="f flex">
  <div class="t">
    Some<br>text
  </div>
  <img src="https://picsum.photos/200/300">
</div>

CSS #

.f {
  height:250px;
  width:250px;
  border:1px solid red;
}

.t {
  font-size:50px;
}

img {
  height:100%;
  width:100%;
  object-fit:contain;
  /* 该属性在WebKit中无效 */
  flex-shrink:1; 
}

.flex {
  display:flex;
  flex-direction: column;
}

解决方案 #

WebKit内核浏览器在垂直flex布局中，对子元素的height:100%解析逻辑与Firefox不同，需调整图片的flex属性来适配剩余空间：

方案一：直接修改图片样式 #

调整CSS中img的规则：

img {
  width:100%;
  object-fit:contain;
  flex: 1 1 auto; /* 让图片占据容器剩余空间，同时允许收缩 */
  min-height: 0; /* 打破WebKit默认最小高度限制，确保图片能收缩到容器内 */
}

方案二：给图片添加包裹容器 #

如果需要保留图片的height:100%设置，可以给图片增加一层容器：

修改后的HTML

<div class="f flex">
  <div class="t">
    Some<br>text
  </div>
  <div class="img-container">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

新增及调整的CSS

.img-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.img-container img {
  height:100%;
  width:100%;
  object-fit:contain;
}

原理说明 #

• 在垂直flex布局中，WebKit需要通过flex属性明确分配剩余空间，仅设置flex-shrink:1无法让元素正确适配剩余高度
• min-height:0用于解除WebKit的默认最小高度约束，确保元素可以收缩到容器范围内，避免溢出

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