'How to make columns equal height if siblings are hidden?

I am trying for equal height columns and implementing this on a Bootstrap carousel for a testimonials page. I want the height of all carousel items to be the same, but it's not working as expected.

Here is my example:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css');
body {
    background: #ccc;
}
div#carousel-example-generic {
    margin: auto;
    max-width: 600px;
}
.carousel-inner {
    display: flex;
}
.carousel-inner > .item.active{
    display: flex;
}
div#carousel-example-generic p{
    border: 1px solid #efefef;
    padding: 40px;
}
    
ol.carousel-indicators {
    position: static;
    text-align: center;
    margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="item">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the </p>
        </div>
        <div class="item">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has typesetting industry. Lorem Ipsum has been the </p>
        </div>
    </div>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
</div>

I think equal height is not working when siblings have display:none because when I use display: flex; on simple .item (without targeting .item.active)

.carousel-inner > .item{
    display: flex;
}

it works as expected, but the issue is other item will also display. See here

My testimonials are dynamic so I cannot give a fixed height. I am looking for pure CSS solution.

htmlcsstwitter-bootstrapflexbox


Solution 1:[1]

You’ll want to execute jQuery, after the carousel HTML exists on the page, or once the DOM is ready.

function carouselNormalization() {
var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

if (items.length) {
    function normalizeHeights() {
        items.each(function() { //add heights to array
            heights.push($(this).height()); 
        });
        tallest = Math.max.apply(null, heights); //cache largest value
        items.each(function() {
            $(this).css('min-height',tallest + 'px');
        });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function () {
        tallest = 0, heights.length = 0; //reset vars
        items.each(function() {
            $(this).css('min-height','0'); //reset min-height
        }); 
        normalizeHeights(); //run it again 
    });
}
}

Solution 2:[2]

use this.. i tested worked:

.carousel-inner > .item{
    height:300px;
}
.carousel-inner > .item > p{
   display:block;
   height:100%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nithin Charly
Solution 2

Related Questions