prevent component inside carousel from resizing

I'm trying to make a carousel that contains a number of cards. The problem is, when I add 4 cards in the carousel, the cards don't maintain their original height and width, the width reduces while the height increases to fit the screen. I want the cards to maintain the original sizes, and the user should be able to scroll horizontally to see the remaining cards. How can I achieve this?

Carousel:

<div style={{display: 'flex', width: '100%',padding: '20px 20px', overflowX: 'scroll', overflowY: 'scroll', marginTop: '132px', marginBottom:'400px', marginLeft: '40px',marginRight:'40px'}}>
    <Card />
    <Card />
    <Card />
    <Card />
</div>

Card.js:

<div className="card-root">
    <div className="card-details">
        <img className="quote-logo" src={quote} alt=""/>
        <p className="testimonial-text">Lorem ipsum bla bla bla</p>
        <p className="testimonial-byline">Eric Wang, Co-founder and CEO</p>
        <img className="testimonial-company-logo" src={companyLogo} alt="" />
    </div>
</div>

Card.css:

.card-root {
    box-shadow: 0px 4px 25px 6px rgba(0, 0, 0, 0.1);
    min-width: 291px;
    max-width: 577px;
    min-height: 320px;
    max-height: 600px;
    border-radius: 10px;
    margin-right: 40px;
}

.card-details {
    padding: 56px 58px 100px 73px;
}

.testimonial-text {
    font-family: 'Helvetica Neue Light';
    font-size: 24px;
    line-height: 40px;
    margin-top: 30px;
    margin-bottom: 48px;
}

.testimonial-byline {
    margin-top: 0px;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue Regular';
    font-size: 24px;
    line-height: 44px;
}

.testimonial-company-logo {
    height: 24px;
    width: 98px;
}