OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Uber Batko
  • Start date Start date
U

Uber Batko

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

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

Code:
.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

<p>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.</p>
<p>Here's a simplified version of my HTML and CSS structure:</p>
<pre><code>
<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>


</code></pre>
<pre><code>
.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 */
}


</code></pre>
<p>Despite setting <code>overflow: hidden;</code> on <code>.container-wrapper</code>, the last image in <code>.images-wrapper</code> still overflows visibly. I've checked the widths and positioning, and everything seems correct.</p>
<p>What could be causing this issue? How can I ensure that <code>overflow: hidden;</code> effectively hides the overflowing images within .container-wrapper?</p>
<p>This is how it looks now:</p>
<p><a href="https://i.sstatic.net/M62rTwUp.png" rel="nofollow noreferrer">This is how it looks now</a></p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top