如何让Flex布局中的图片伸缩至与兄弟元素等高且适配宽度？

Flex布局修复方案 #

问题出在作为flex-item的section元素默认min-width: auto，这会强制它保留内部图片的原始宽度，即使图片已经缩小。只需添加两行CSS即可解决：

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  border: thin solid black;
  min-width: 0; /* 允许section收缩，突破默认最小宽度限制 */
}

img {
  flex-basis: 0px;
  flex-grow: 1;
  object-fit: contain;
  overflow-y: auto;
  width: 100%; /* 让图片宽度完全适配容器 */
}

修改后的HTML结构不变：

<main>
  <section>
    <img src="http://via.placeholder.com/200x200">
  </section>
  <section>
    <div>Match my height.</div>
  </section>
</main>

替代方案：Grid布局 #

如果更倾向于Grid，也可以实现同样效果，代码更简洁：

main {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr; /* 让两个section宽度均分 */
}

section {
  border: thin solid black;
  display: flex;
  flex-direction: column;
}

img {
  flex-grow: 1;
  object-fit: contain;
  width: 100%;
}

原理说明 #

1. min-width: 0：解除flex-item的最小宽度限制，允许它根据内容实际尺寸收缩，避免保留图片原始宽度导致的空白。
2. width: 100%：让图片宽度完全继承容器宽度，配合object-fit: contain保证图片比例不变，同时高度随flex-grow自适应兄弟元素高度。

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