javascripthtmlcssliquid

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>