Images overflow .container-wrapper despite overflow: hidden; not working

I'm working on a custom section for a website where I have a .container-wrapper element containing text and multiple images. The container is supposed to have overflow: hidden; to prevent overflow issues. However, the images inside .images-wrapper are still overflowing the container's bounds.

Here's a simplified version of my HTML and CSS structure:


<section class="custom-section">
  <div class="container-wrapper">
    <!-- Text and other content -->
    
    <div class="images-wrapper">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</section>


.custom-section {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 650px; /* Adjust as needed */
}

.custom-section .container-wrapper {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  overflow: hidden; /* Should hide overflow */
}

.custom-section .images-wrapper {
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  position: absolute;
  left: 0; /* Adjust as needed */
  display: flex;
  gap: 30px;
}

.custom-section .images-wrapper img {
  width: 300px; /* Adjust as needed */
  height: 430px; /* Adjust as needed */
}

Despite setting overflow: hidden; on .container-wrapper, the last image in .images-wrapper still overflows visibly. I've checked the widths and positioning, and everything seems correct.

What could be causing this issue? How can I ensure that overflow: hidden; effectively hides the overflowing images within .container-wrapper?

This is how it looks now:

This is how it looks now

Solution

Since the .container-wrapper has no specific width the overflow: hidden won't have any effect. Just add a max-width, and it will be just fine, like so:

.custom-section {
  position: relative;
  width: 100%; 
  height: 650px; 
}

.custom-section .container-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    max-width: 1100px; /*this is the important new code. Adjust as desired*/
}

.custom-section .images-wrapper {
  width: 100%; 
  height: 100%; 
  position: absolute;
  left: 0; 
  display: flex;
  gap: 30px;
}

.custom-section .images-wrapper img {
  width: 300px; 
  height: 430px; 
}

<section class="custom-section">
  <div class="container-wrapper">
    <!-- Text and other content -->

    <div class="images-wrapper">
      <img src="https://picsum.photos/200/300" alt="Image 1">
      <img src="https://picsum.photos/200/300" alt="Image 2">
      <img src="https://picsum.photos/200/300" alt="Image 3">
      <img src="https://picsum.photos/200/300" alt="Image 4"><!-- for illustration only-->
    </div>
  </div>
</section>