How to equal height if brothers and sisters are hidden

Question

I am trying to equal height and implement this on a boot carousel for reference. I want the height of all the elements of the carousel to be the same, but not work as expected.

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

Run codeHide result

What do I understand?

I think equal height doesn't work if siblings have it display:none, because when I use display: flex;for simple .item(no targeting .item.active)

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

Its work is as expected, but the problem is that another item will also be displayed. See here

My reviews are dynamic, so I can’t give a fixed height.

I am looking for a clean css solution. Thanks

Answer 1

jQuery, , HTML- DOM .

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

Answer 2

. :

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