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.