Why are Those things different with CSS overflow hidden? - css

Question

Everything is okay except "the overflow".
When I put "overflow : hidden" in 'image-container', It s not work like sequential carousel.
But when I put "overflow : hidden" in 'carousel', It s work like sequential carousel.
I don't know what's the different with those things and Why is this happened?
let imgs = document.querySelector('.image-container');
let img = document.querySelectorAll('.image-container img');
let idx = 0;
function slideShow() {
idx++;
if (idx > img.length - 1) {
idx = 0;
}
imgs.style.transform = `translateX(${-idx*300}px)`;
}
setInterval(slideShow, 2000);
.carousel {
/*overflow: hidden;*/
}
.image-container {
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 300px;
width: 300px;
display: flex;
}
img {
object-fit: cover;
height: 300px;
width: 300px;
}
<div class="carousel">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="" />
<img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="" />
</div>
</div>

Answer 1

If you set {overflow: hidden} to {image-container} then that means anything that is beyond the specified width of that container will be hidden.
So either you could increase the width of the {image-container}
.image-container {
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 300px;
width: 1000px;
display: flex;
}
or you could use
.carousel {
overflow: hidden;
}