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