Resize the height of all cards based on the one with the most content

Question

I am using owl carousel to display different card items. Here, I am facing an issue with the height of each card. As we can see, card's height is depending on the content inside. I want to show all the cards with the equal height based on the one with the most content. (i.e here first card: 'Tile 1' ~ with red border)

I am using Owl carousel version 2.0.0

I have already tried with 'display:flex' option, but not sure I did it correctly. Here is the css for owl-stage.

.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)
}

Here is the css for owl-item.

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

Here is the 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

I solved this issue by using flex. I changed my html to

<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>

And added following 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

What I'm thinking now is you can create a div element and have all of the card as its child.

Give the div element height: auto; then the cards height: 100%;

Have a try