我有三个项目（列）与display: flex和margin-left设置给他们。当我调整窗口大小和滚动右他们是去框/窗口（溢出）。第二个问题-第三张图片是不同的高度，即使我设置max-height给它。这里只是代码的一部分（问题再次发生，即使在这里）：

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

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

.articleContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 600px;
}

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

.content img {
  top: 0;
  max-height: 230px;
  width: 333px;
}

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

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

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

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

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

我试过将min-width设置为0，但如果我这样做，列会重叠，max-height似乎无法解决第三张图片的高度问题。