I have a solution for achieving equal height columns using the CSS property display:table. Here is an example:
.row {
display: table;
width: 100%;
}
.col{
display: table-cell;
}
However, in my case, I am using flexbox and the row class has display:flex:
.row {
display: flex;
display: ms-flex;
flex-wrap: wrap;
}
All columns have the class .large-4:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
}
I cannot use flex:1 for .large-4 due to variations in different viewports. Here is a snippet of the HTML code:
<div class="row">
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste distinctio optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam veritatis.</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste distinctio.</p>
</div>
</div>
</div>
</div>
You can find the CodePen link here! Please suggest how I can achieve equal height columns using flexbox or any better solution. Thank you.