why are all the elements instead of one in OwlCarousel?

Question

I have block wrapper and three block inside: leftside, main and rightside. Leftside and rightside have fixed width:

.wrapper {
    display: flex;
}

.sidebar-left,
.sidebar-right {
    flex: 0 0 300px;
}

.main have property flex: 1;

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

I've tried to create very simple owl-carousel.

<div class="owl-carousel">
    <div class="item">
        <a href="{% url 'subcategory_products' subcategory_slug='' %}">
            <img src="/media/carousel_images/1.png" alt="Image 1">
            <div class="caption">
                <h1></h1>
            </div>
        </a>
    </div>
    <div class="item">
        <a href="{% url 'subcategory_products' subcategory_slug='' %}">
            <img src="/media/carousel_images/2.png" alt="Image 2">
            <div class="caption">
                <h1></h1>
            </div>
        </a>
    </div>
    <div class="item">
        <a href="{% url 'subcategory_products' subcategory_slug='' %}">
            <img src="/media/carousel_images/3.png" alt="Image 3">
            <div class="caption">
                <h1></h1>
            </div>
        </a>
    </div>
</div>

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        items: 1,
        loop: true,
        margin: 10,
        singleItem: true,
        autoplay: true,
        autoplayTimeout: 6000
    });
});

And this is result: the width of main becomes very very large

The problem is that owl-carousel for some reason decided that it needs to show three elements per line, and not one

I've to limit width of main and owl-carousel by brute force, but it doesnt work. I strictly specified that I only want to see one element. Why doesn't this work?