Flex layout breaks when connecting Slick slider. How to fix?

Question

Layout

html

<div class="reviews">
        <div class="container">
            <div class="reviews__inner">
                <div class="reviews__description">
                    <h2 class="reviews__title">What our customers have to say about us.</h2>
                    <p class="reviews__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                    <button class="reviews__button">Get started</button>
                </div>
                <div class="reviews__cards">

                    <div class="reviews__item">
                        <img src="/img/review-1.png" alt="photo" class="reviews__img">
                        <div class="reviews__card">
                            <div class="card__name">John Doe</div>
                            <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</div>
                        </div>
                    </div>

                    <div class="reviews__item">
                        <img src="/img/review-2.png" alt="photo" class="reviews__img">
                        <div class="reviews__card">
                            <div class="card__name">Khalessi</div>
                            <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</div>
                        </div>
                    </div>

css

.reviews__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviews__cards {
    margin-bottom: 70px;
    margin-top: 87px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.reviews__item {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 70px;

    
}

.reviews__img {
    width: 60px;
    height: 60px;
    margin-right: 45px;
}

.reviews__card {
    min-height: 150px;
    max-width: 650px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background-color: #ffffff;
}

.card__name {
    margin: 30px 0px 15px 30px;
    color: #061e37;
    font-size: 18px;
    font-weight: 700;
}

.card__text {
    margin: 0px 30px 30px 30px;
    color: #78909c;
    font-size: 15px;
    line-height: 1.66;
}

I'm trying to connect a slick slider to the layout for such a vertical carousel.
photo layout:

connection code:

$(document).ready(function() {
    $('.reviews__cards').slick({
        slidesToShow: 2,
        vertical: true
      });     
});

after connecting, the layout breaks in a strange way: by

adding to css

.slick-slider {
    width: 100%;
    max-width: 720px;

managed to achieve this look:

But the photos with the reviews__img class are on top and its parent in devtools is assigned display: block; instead of the flexes I prescribed. How to get the slick slider to work properly with flecks and solve this problem?

Answer 1

Wrap each of the elements .reviews__itemin an additional div.

Answer 2

To .reviews__cardsadd min-width: 0;helped me