Flex布局项超出最大宽度及图片高度异常问题求助

先修复核心HTML结构错误 #

你当前的HTML里，三个.content元素是嵌套结构，这会导致Flex布局完全混乱，先把它们调整为.articleContainer的直接子元素：

<div class="background"> </div>

<article>
  <div class="articleContainer">
    <div class="content">
      <img src="https://i.imgupx.com/VHqKvqVY/metropolis-meltdown.png" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>

    <div class="content">
      <img src="https://i.imgupx.com/wyFIxuMT/metropolis-blue-meltdown.jpeg" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>

    <div class="content">
      <img src="https://i.imgupx.com/EBvbuJgh/Optimized-PHRANK.jpeg" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>
  </div>
</article>

问题1：Flex列溢出窗口 #

原因

• .articleContainer默认flex-wrap: nowrap，所有子元素强制挤在一行
• 每个.content设置了margin-left: 10%+固定宽度333px，总宽度远超容器/窗口宽度
• 原始嵌套结构进一步叠加了间距和宽度，加剧溢出

修复方案

选择以下两种方式之一：

1. 窗口缩小时自动换行：给.articleContainer添加换行属性，用gap代替margin-left控制间距，避免额外宽度浪费
2. 允许横向滚动：保留一行布局，添加横向滚动条，内容不会溢出窗口

方案1：自动换行的CSS修改

.articleContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 600px;
  flex-wrap: wrap; /* 窗口缩小时自动换行 */
  gap: 10%; /* 替代margin-left，控制列之间的间距 */
  padding: 0 5%; /* 左右留白避免贴边 */
  box-sizing: border-box; /* 让padding包含在容器宽度内 */
}

.content {
  position: relative;
  display: flex;
  flex-direction: column; /* 图片和文本垂直排列，默认row会错乱 */
  border-top: 7px solid rgb(227, 0, 26);
  height: 600px;
  background-color: black;
  top: -4px;
  width: 333px;
  flex-shrink: 0; /* 保持固定宽度不被压缩 */
  margin-bottom: 20px; /* 换行后添加底部间距 */
}

方案2：横向滚动的CSS修改

.articleContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 600px;
  overflow-x: auto; /* 允许横向滚动，内容不会溢出窗口 */
  gap: 10%;
  padding: 0 5%;
  box-sizing: border-box;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 7px solid rgb(227, 0, 26);
  height: 600px;
  background-color: black;
  top: -4px;
  width: 333px;
  flex-shrink: 0; /* 保持固定宽度 */
}

问题2：第三张图片高度不一致 #

原因

只设置max-height:230px和固定宽度，图片原始宽高比不同，浏览器会按比例缩放，导致高度无法统一；且HTML里的width属性会干扰CSS控制。

修复方案

固定图片高度，用object-fit强制保持比例：

.content img {
  top: 0;
  height: 230px; /* 固定高度，替代max-height */
  width: 100%; /* 宽度占满父元素，更灵活 */
  object-fit: cover; /* 裁剪图片保持比例，填满容器；用contain可完整显示图片但会留白 */
}

完整修复后的代码 #

CSS

body {
  margin: 0;
  width: 100%;
}

.background {
  position: relative;
  width: 100%;
  height: 1000px;
  background-color: gray;
}

.articleContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 600px;
  flex-wrap: wrap;
  gap: 10%;
  padding: 0 5%;
  box-sizing: border-box;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 7px solid rgb(227, 0, 26);
  height: 600px;
  background-color: black;
  top: -4px;
  width: 333px;
  flex-shrink: 0;
  margin-bottom: 20px;
}

.content img {
  top: 0;
  height: 230px;
  width: 100%;
  object-fit: cover;
}

.box {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  left: 0;
  background-color: rgb(227, 0, 26);
}

HTML

<div class="background"> </div>

<article>
  <div class="articleContainer">
    <div class="content">
      <img src="https://i.imgupx.com/VHqKvqVY/metropolis-meltdown.png" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>

    <div class="content">
      <img src="https://i.imgupx.com/wyFIxuMT/metropolis-blue-meltdown.jpeg" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>

    <div class="content">
      <img src="https://i.imgupx.com/EBvbuJgh/Optimized-PHRANK.jpeg" alt="Metropolis">
      <div class="box"></div>
      <div class="textContent"></div>
    </div>
  </div>
</article>

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