显示：超出最大宽度的弹性项目

Question

我有三个项目（列）设置了 display flex 和 margin-left 。当我调整窗口大小时并向右滚动时，它们会超出框/窗口（溢出）。 第二个问题 - 第三张照片的高度不同，即使我设置了最大高度。 这里只是代码的一部分（即使在这里问题再次出现）：

HTML：

    <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>

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;
  }
  
  .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);
  }

我试过将最小宽度设置为 0，但如果我这样做，列会重叠，而最大高度似乎无法解决第三张图片高度的问题。

Answer 1

对于第一个问题，可以在.articleContainer中添加如下CSS属性：

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

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

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

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

希望这个回答对你有帮助