Why is slick js slider not working?

Question

css

Here is the page structure:

<div class="wrapper-flex">
    <div class="wrapper-sidebar">
        Sidebar
    </div>
    <div class="wrapper-content">
        <div class="wrapper">
            <div class="col-full">
                <div class="slick-catalog">
                    <div class="slick-child_flex">
                        <div class="wrapper">
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                        </div>
                    </div>
<div class="slick-child_flex">
                        <div class="wrapper">
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.wrapper-flex {
        display: flex;
    }

    .wrapper-sidebar {
        flex-basis: 25%;
    }

    .wrapper-content {
        flex-basis: 75%;
    }

    .wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .col-full {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .slick-child_flex {
        display: flex;
        align-items: center;
    }

    .col4 {
        flex: 0 0 33%;
        max-width: 33%;
    }

But when I include slick the whole page falls apart. What's my mistake?

$(function () {
        $(".slick-catalog").slick({
            arrows: false,
        });
    });

Answer 1

Put each slide in an empty div and insert your slick-child_flex blocks inside it.
In addition, you need to limit the width of .wrapper-content because flex-basis: 75% allows you to drag the block as much as you like and your slides safely stretch it as they want. At a minimum, such a flex element should be set to min-width: 0;

Answer 2

https://www.youtube.com/watch?v=rXNfDfqtM3M&t=485s