Измените высоту всех карт, основываясь на одной с наибольшим содержанием

Question

Я использую совую карусель для отображения различных карточных предметов. Здесь я сталкиваюсь с проблемой высоты каждой карты. Как мы видим, высота карты зависит от содержимого внутри. Я хочу показать все карты с одинаковой высотой, основанные на одной с наибольшим содержанием. (т.е. здесь первая карта: «Плитка 1» ~ с красной рамкой)

Я использую версию с каруселью для совы 2.0.0

Я уже пробовал с дисплеем: flex 'вариант, но не уверен, что я сделал это правильно. Вот css для совы-ступени.

.owl-carousel .owl-stage {
    position: relative;
    margin:  0 auto;
    -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0, 0)
}

Вот css для совы-предмета.

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

Вот HTML:

<div class="owl-carousel owl-theme">
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
            <div id="link_with_images">Tile 1</div>
            <p id="sub_title">Tile 1 SH Tile 1 SH Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH1Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH SH</p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src=" https://www.photolakedistrict.co.uk/wp-content/uploads/2017/11/sony-A9-sample-photographs.jpg">
            <div id="link_with_images">Tile 3</div>
            <p id="sub_title">TIle 3 SH</p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
            <div id="link_with_images">tile 3</div>
            <p id="sub_title"></p>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
            <div id="link_with_images">FutureMakers</div>
            <p id="sub_title">Tile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SHTile 1 SH</p>
        </div>
    </a>
</div>

TIA

Answer 1

Я решил эту проблему с помощью flex. Я изменил свой html на

<div class="owl-carousel owl-theme">
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
                    <div class="caption">
                        <div id="link_with_images">Tile 1</div>
                        <p class="flex-text" id="sub_title">Tile 1 SH T</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src=" https://www.photolakedistrict.co.uk/wp-content/uploads/2017/11/sony-A9-sample-photographs.jpg">
                    <div class="caption">
                        <div id="link_with_images">Tile 3</div>
                        <p class="flex-text" id="sub_title">TIle 3 SH</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
                    <div class="caption">
                        <div id="link_with_images">tile 3</div>
                        <p class="flex-text" id="sub_title">asdsfa fasasfas fasdasf</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="container">
        <div class="thumbnail item">
            <a href="#" target="_blank">
                <div class="item"><img alt="Carousel Item" class="image-background" src="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg">
                    <div class="caption">
                        <div id="link_with_images">FutureMakers</div>
                        <p class="flex-text" id="sub_title">Tile 1 SHTile 1 SH</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

И добавил следующее CSS.

.owl-carousel .owl-stage {
        display: flex;
    }
    .owl-carousel   .owl-item {
        display: flex;
        flex: 1 0 auto;
    }
    .owl-carousel .caption {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        padding: 0px 10px;
    }
    .owl-carousel .flex-text {
        flex-grow: 1
    }
    .owl-carousel .thumbnail {
        display: flex;
        flex-direction: column;
    }
    .owl-carousel .container {
        display: grid;
    }

Answer 2

Теперь я думаю, что вы можете создать элемент div и получить всю карту в качестве дочернего элемента.

Укажите высоту элемента div: auto; затем высота карт: 100%;

Попробуйте