Flexbox垂直布局下，如何随文本长度调整图片尺寸？

要实现文本长度变化时，图片自动调整尺寸适配容器剩余空间，核心是突破Flex子元素默认的min-height: auto限制，再配合flex布局让图片填充可用空间。

带图片容器（img-wrapper）的情况 #

针对给出的初始代码，修改如下：

.container {
  width: 400px;
  height: 300px;
  border: 3px solid green;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.img-wrapper {
  display: flex; /* 开启flex，让内部图片能填充容器 */
  min-height: 0; /* 解除flex子元素默认的min-height:auto限制，允许容器被压缩 */
}

.img-wrapper img {
  max-width: 100%;
  min-height: 0; /* 允许图片高度被压缩 */
  object-fit: cover; /* 保持图片比例，裁剪适配空间 */
  flex: 1; /* 让图片自动填充img-wrapper的可用空间 */
}

对应的HTML结构不变：

<div class="container">
  <div class="img-wrapper">
    <img src="https://static.billboard.com/files/media/talib-kweli-2018-cr-Dorothy-Hong-billboard-1548-compressed.jpg" />
  </div>
  <div class='text'>
    this is a cool paragraph about the angry theicn shfieh that eats and is not pfeifol about the nutehc chartogret including but not adfentily of the crooked and devque thandilbot. Piej kargrid angy that iejf othersome to the compact shiferboth
  </div>
</div>

关键修改说明：

• 给img-wrapper加display: flex和min-height: 0：前者让图片能利用flex特性占满容器，后者打破flex子元素默认的“不能压缩到自身内容高度以下”的限制，这样文本变长时，图片容器会自动让出空间。
• 图片加flex:1：让图片自动填充img-wrapper的剩余空间，object-fit: cover保证图片比例不变，不会被拉伸变形。

图片作为Flex容器直接子元素的情况 #

如果图片没有外层wrapper，直接放在.container里，简化版方案如下：

.container {
  width: 400px;
  height: 300px;
  border: 3px solid green;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.container img {
  min-height: 0;
  object-fit: cover;
  flex: 1; /* 让图片自动填充容器剩余空间 */
}

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