How img overflow div - css

Question

I'm building carousel with react, and content images are horizontally aligned.
If I say 3 tags are in div with width 1200px, how can I control these images what I want whether it's overflow container div or not? ( cf. It's not important, however I'm using React.js)
sorry for skipping my codes so far. I'm trying to handle this with styled-components"
const SliderContainer = styled.div`
overflow: hidden;
width: 100%;
position:relative;
`;
const Slider = styled.div`
width:100%;
overflow:hidden;
display: flex;
`
const IMG = styled.img`
width: 100%;
height: 70vh;
`;
export const Slide: SFC<{
src?: string,
alt?: string
}> =({
src,
alt
}) => {
return(
<IMG src={src} alt={alt}/>
)
}
export const Carousel: FC = () => {
return(
<SliderContainer>
<Slider>
<Slide src={"1.png"}/>
<Slide src={"2.png"}/>
<Slide src={"3.png"}/>
</Slider>
</SliderContainer>
)

Answer 1

<div class="parent">
<div class="container">
<img id="img1" />
<img id="img2" />
<img id="img3" />
</div>
</div>
when we want those images( or contents) in div which has container as a classname over flow <div class="parent"></div>
we should specify the length of <div class="container"></div>
so in this case
.parent{
width: 100%;
overflow;
}
.container{
display: flex; // so we have 3 images horizontally
width: 1028px; // whatever but more than .parent widh
}
.img{
width:100%;
height: auto;
}
the reason we should specify .container div width is, we have flex display in this case, so whole img width might be auto resize through this flex properties.
and .parent's overflow: hidden property only make sense when it's child tag has large length more than itself.