I am currently working on a unique section for a website that includes a .container-wrapper element consisting of text and multiple images. The container is set to have overflow: hidden; in order to prevent any overflow issues. However, the images within the .images-wrapper are still overflowing beyond the boundaries of the container.
Here is a simplified version of the HTML and CSS structure I am working with:
<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%;
height: 650px;
}
.custom-section .container-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.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;
}
Even though overflow: hidden; is applied to .container-wrapper, the final image in .images-wrapper is still visibly overflowing. I have double-checked the widths and positioning, and everything appears to be in order.
What could be causing this issue? How can I ensure that overflow: hidden; effectively conceals the overflowing images within .container-wrapper?
This is the current look of the section: