Display: Flex item going out of the max width

Question

I have three items (columns) with display: flex and margin-left set to them. When I resize the window and scroll right they are going out of the box/window (overflowing). Second problem - the third pic is with different height even though I set max-height to it. Here's just a part of the code (the problem occurs again even here):

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>

I've tried min-width set to 0 but the columns are overlapping if i do it and max-height seems to not resolving the problem with the height of the third pic.

Answer 1

For the first problem, you can add the following CSS properties to .articleContainer :

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

This will allow horizontal scrolling when the items go out of the box and also prevent the items from wrapping to the next line and going out of the box.

For the second problem, this problem appears because the aspect ratio of the image is not consistent with the other images. To fix this, you should use a fixed height and width instead of max-height.

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

I hope this answer is helpful to you.