Equal Height Columns or Height of the Column will be based on the longest Column among them

Issue

I have few containers with different length due to the number of text on each container and I am trying to make all container to have the same size. When the screen are smaller, all container should still be equal, I've tried changing the width and it did not work so how do i achieve that?

Here is my code:

/* Tours boxes*/
.tour_container {
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    margin: 0;
    margin-bottom: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}

.tour_container:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);  
}

.list_carousel .tour_container {
    position: static;
}

.img_container {
    position: relative;
    overflow: hidden;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tour_container .tour_title {
    padding: 15px 15px 10px 15px;
}

<div class="container margin_60">
    <div class="main_title">
        <h2>Your <span>Friendly Self-Service</span> Tour Guide</h2>
        <p>Discover Heritages</p>
    </div>
    <div class="owl-carousel owl-theme list_carousel add_bottom_30">
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
    </div>
    <!-- /carousel -->
</div>
<hr>
<!-- End container -->

Solution

You can add the below CSS in your style file. It will fix your issue.

.owl-carousel .owl-stage{
    display: flex;
}
.item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.tour_container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

Answered By - Frontend Team