CSS Flex布局：实现图片伸缩填充剩余垂直空间且避免不必要滚动

嘿，我明白你要实现的这个布局有多棘手——既要让图片区块填充满垂直空白，又不能随便出现滚动，还得保证图片比例不跑偏。我给你整了一个纯CSS的解决方案，完美贴合你的所有需求：

完整实现代码 #

HTML #

<div class="outer">
  <div class="inner">
    <p>The first section 1</p>
    <p>The first section 2</p>
  </div>
  <div class="inner">
    <p>The second section 1</p>
    <p>The second section 2</p>
  </div>
  <div class="inner image-container flexible">
    <div class="image">
      <img src="https://m.media-amazon.com/images/I/71QHUI7yiUL._AC_SX679_.jpg" />
    </div>
    <div class="content">
      <p>Descriptive content goes here</p>
      <p>More lines of descriptive content to make this section taller</p>
      <p>Even more content to ensure this has a noticeable height</p>
    </div>
  </div>
</div>

CSS #

/* 全局重置，消除默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  border: 1px solid black;
  height: 100dvh; /* 用动态视口高度，适配移动端状态栏/导航栏 */
  overflow-y: auto; /* 仅当内容超出视口才显示滚动条，避免不必要滚动 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
}

/* 固定内容的区块：保持原尺寸，不伸缩 */
.inner {
  padding: 8px;
  border: 1px solid blue;
  background-color: lightblue;
  flex: 0 1 auto; /* 不放大，仅缩小到内容最小高度 */
}

/* 图片所在的弹性区块：占据剩余垂直空间 */
.inner.image-container.flexible {
  flex: 1; /* 自动填充固定内容之外的所有剩余垂直空间 */
  border: 1px solid orange;
  background-color: chartreuse;
  display: flex;
  gap: 8px;
  align-items: stretch; /* 让内部子元素高度与父区块一致，保证图片不矮于右侧文本 */
  min-height: 0; /* 关键：解除flex子元素默认的最小高度限制，允许区块缩小到内容高度以下 */
}

/* 图片容器：占50%宽度，居中显示图片 */
.inner.image-container .image {
  width: 50%;
  min-height: 0; /* 允许图片容器跟随父区块缩小 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 右侧文本容器：占50%宽度，内容保持原高度 */
.inner.image-container .content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 8px;
}

/* 图片缩放规则：保持比例，不拉伸变形 */
.inner.image-container .image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 按原比例缩放，完整显示图片，避免拉伸 */
}

核心设置说明 #

• 100dvh 替代固定高度：动态视口高度能精准适配不同设备的可视区域，避免移动端状态栏导致的布局偏差。
• overflow-y: auto 按需滚动：只有当所有内容最小化后仍超出视口时，才会出现滚动条，彻底避免不必要的滚动。
• flex: 1 给图片区块分配剩余空间：让黄绿色区块自动填充固定内容之外的所有垂直空白，消灭多余留白。
• min-height: 0 解除缩小限制：Flex子元素默认有最小高度限制，加上这个属性才能让图片区块在视口变矮时，缩小到和右侧文本一样高。
• object-fit: contain 保护图片比例：确保图片始终按原比例缩放，不会被拉伸变形，同时完整显示在容器内。
• align-items: stretch 保证最小高度：让图片容器至少和右侧文本一样高，符合你“图片不能比右侧文本矮”的要求。

效果验证 #

• 视口足够高时：图片区块填充剩余垂直空间，图片按比例放大，黄绿色背景填满图片周围的空白，无滚动。
• 视口逐步变矮：图片按比例缩小，直到和右侧文本高度一致；视口继续变矮，此时内容最小高度超出视口，才会出现滚动条。
• 固定内容区块始终保持自身高度，不会被拉伸或缩小。

内容来源于stack exchange