CSS Flexbox图片溢出问题排查：为何图片超出容器？

你的图片溢出问题主要来自以下几点：

1. 容器高度限制未处理溢出：.section2 设置了固定的 height:100vh，但未配置溢出行为。当图片换行后总高度超过容器高度时，内容会直接溢出容器边界。
2. Flex子元素缺少布局约束：.gal-wrapper 作为 .section2 的Flex子元素，默认会被拉伸至容器高度，但图片换行后的总高度可能超过这个值，且没有限制自身的溢出规则。
3. 图片未设置Flex缩放规则：图片仅设置了 max-width:100%，但没有定义在Flex容器中的缩放、换行行为，导致无法根据容器空间自动调整尺寸。

修复方案（两种可选） #

方案1：允许容器滚动（推荐）

给 .section2 添加溢出滚动属性，让超出容器高度的内容可以滚动查看：

.section2 {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-y: auto; /* 纵向滚动 */
}

.gal-wrapper {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  gap: 10px; /* 添加图片间距，优化布局 */
  padding: 10px;
}

.gal-wrapper img {
  flex: 1 1 calc(33.333% - 10px); /* 三列自适应布局，支持缩放 */
  max-width: calc(33.333% - 10px);
  height: auto;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

方案2：强制图片适配容器高度（需固定列数）

如果不想滚动，可以通过限制图片高度来适配容器，但需要固定列数，且可能导致图片压缩：

.section2 {
  display: flex;
  width: 100%;
  height: 100vh;
}

.gal-wrapper {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  align-content: flex-start; /* 避免内容被强制拉伸 */
  gap: 10px;
  padding: 10px;
}

.gal-wrapper img {
  flex: 1 1 calc(33.333% - 10px);
  max-width: calc(33.333% - 10px);
  max-height: calc((100vh - 40px) / 2); /* 计算单张图片最大高度，适配两行 */
  object-fit: cover;
}

关键说明 #

• flex: 1 1 <base-width> 是核心：1 1 表示图片可以根据容器空间放大或缩小，<base-width> 定义了图片的基础宽度（这里是三列布局）。
• object-fit: cover 用于保持图片的宽高比，避免因缩放导致的变形。
• 若使用滚动方案，overflow-y: auto 会在内容超出时自动显示滚动条，否则隐藏。

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