显示：Flex 项目超出最大宽度

Question

我有三个项目（列）并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似乎无法解决第三张图片的高度问题。

Answer 1

对于第一个问题，您可以将以下 CSS 属性添加到 .articleContainer ：

.articleContainer {
  overflow-x: auto;
  white-space: nowrap;
}

这将允许项目在开箱时水平滚动，并防止项目换行到下一行并开箱。

对于第二个问题，出现这个问题是因为图像的长宽比与其他图像不一致。要解决此问题，您应该使用固定的高度和宽度而不是最大高度。

.content img {
  height: 230px;
  width: 333px;
}

我希望这个答案对您有所帮助。