React-reponsive carousel to fit parent container width and height - css

Question

I am new to react.
I a trying to setup a little app. On home page we have carousel.
My home page code is:
render(){
return (
<div className="main-page">
<div className="row full-height">
<div className="common-info col-lg-7">
<div className="row center-lg logo-container">
<LogoImg/>
</div>
<CarouselComponent/>
</div>
<div className="login-form col-lg-5">
<div className="justify-content-end">
</div>
</div>
</div>
</div>
)
}
In scss:
I set up
.main-page {
height: 100vh;
width: 100vw;
}
Everything works fine until adding
with
return (
<div className="carousel-outer">
<Carousel showArrows={true} showThumbs={false} showStatus={false}>
<div>
<p className="row center-lg learn-eng white-text">Выучи английский</p>
<p className="row center-lg easy-fast white-text">Легко и быстро!</p>
<p className="row center-lg go-abroad white-text">Для поездок за границу</p>
<img src={vacation}/>
</div>
<div>
<img src="assets/2.jpeg"/>
</div>
<div>
<img src="assets/3.jpeg"/>
</div>
</Carousel>
</div>
);
I tried to add styles to Carousel:
.carousel .carousel-slider {
max-width: 100%;
max-height: 100%;
}
.carousel-style {
height: auto;
width: auto;
}
But images are still outside parent container. Horizontal an vertical scrolls are there:
How can I fix the issue?
Work Demo

Answer 1

I could not modify your project but I made a sample .
tip:
.container {
width: 100%;
}
.container .carousel .slide img {
max-height: 100vh;
width: auto; /*100vw*/
}
Work Demo