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

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 >
    <div >
        <h2>Your <span>Friendly Self-Service</span> Tour Guide</h2>
        <p>Discover Heritages</p>
    </div>
    <div >
        <div >
            <div >
                <div >
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533"  alt="image">
                    </a>
                </div>
                <div >
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div >
            <div >
                <div >
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533"  alt="image">
                    </a>
                </div>
                <div >
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div >
            <div >
                <div >
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533"  alt="image">
                    </a>
                </div>
                <div >
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div >
            <div >
                <div >
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533"  alt="image">
                    </a>
                </div>
                <div >
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
    </div>
    <!-- /carousel -->
</div>
<hr>
<!-- End container -->

CodePudding user response：

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