如何利用Flex布局实现图片收缩适配父容器固定高度，避免Header/Footer内容增长时布局溢出

我来帮你搞定这两个Flex布局的问题，咱们一步步调整代码来实现需求：

问题1：让Flex布局中的图片收缩，适配父容器设定的高度 #

原代码里的图片样式存在属性冲突（同时设置了width:100%和width:auto、height:100%和height:auto），而且图片容器的Flex属性配置不合理，导致图片无法跟随容器收缩。我们可以通过调整容器Flex属性和图片样式来解决：

问题2：header/footer内容增多时，图片区域自动收缩，总高度不超父容器 #

原代码中.header和.footer设置了flex-shrink:0，这会导致它们的内容超出时直接撑破父容器。我们需要让header和footer的高度由自身内容决定，同时让中间的图片容器自动填充剩余空间，当header/footer高度增加时自动压缩。

修改后的完整代码 #

* { box-sizing: border-box; }
p, h4 { margin: 0; }
.wrapper {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  border-radius: 5px;
  /* 防止子元素超出容器，可选但推荐 */
  overflow: hidden;
}
.wrapper .header, .wrapper .footer {
  /* 高度由内容决定，不自动扩展，也不被压缩 */
  flex: 0 0 auto;
  /* 若header/footer内容过多，可添加此属性让内部滚动，避免撑破容器 */
  /* overflow: auto; */
}
.header { background: lightskyblue; }
.img-wrap {
  border: 1px solid black;
  /* 占据剩余所有空间，可被压缩 */
  flex: 1 1 0;
  /* 关键：允许容器被压缩到小于内容高度 */
  min-height: 0;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  /* 保持图片比例并填充容器，需完整显示图片可换成object-fit: contain */
  object-fit: cover;
  vertical-align: bottom;
}
.footer { border: 1px solid green; }
.footer .btn {
  display: block;
  width: 95%;
  margin: 0 auto;
  padding: 10px;
}

<div class="wrapper">
  <div class="header">
    <h4>Box title</h4>
    <p>Some blurb text Some blurb text Some blurb text Some blurb text </p>
  </div>
  <div class="img-wrap">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShS9EkKjqdM_u5LKC2rI_Utrc0lVvWy5-krg&usqp=CAU" alt="">
  </div>
  <div class="footer">
    <button class="btn">My button</button>
  </div>
</div>

关键调整说明 #

• .header和.footer：设置flex: 0 0 auto，表示它们的高度由自身内容决定，不会抢占剩余空间，也不会被压缩。如果内容过多，可添加overflow: auto让内部出现滚动条，避免内容溢出容器。
• .img-wrap：flex: 1 1 0让它占据父容器的剩余所有空间，且在header/footer高度增加时可被压缩；min-height: 0是核心，默认Flex子元素的min-height为auto，会阻止容器被压缩到小于内容高度，设置为0后允许容器无限压缩。
• 图片样式：width:100%和height:100%让图片填充容器，object-fit: cover保证图片按比例缩放并填满容器（需完整显示图片可替换为object-fit: contain）。

这样调整后，不管header和footer的内容如何变化，中间的图片区域都会自动收缩，整个布局的总高度始终保持父容器设定的200px，图片也会跟随容器适配高度。

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