SmiteGuy SmiteGuy - 19 days ago 8
CSS Question

Equal elements' height in rows using w3.css

I've been trying to make my rows' elements' height be equal but still haven't succeeded.
Do you have any ideas how to do that?

Thanks, cheers.

<div class="w3-row">
<div class="w3-container w3-quarter w3-green text-center matrix-element">
<h3><i class="material-icons">person</i> name</h3>
<p>100112</p>
</div>
<div class="w3-container w3-quarter w3-green text-center matrix-element">
<h3><i class="material-icons">person</i> name</h3>
<p>100112</p>
</div>
<div class="w3-container w3-quarter w3-green text-center matrix-element">
<h3><i class="material-icons">person</i> name</h3>
<p>100112</p>
</div>
<div class="w3-container w3-quarter w3-green text-center matrix-element">
<h3><i class="material-icons w3-xxlarge">remove_circle_outline</i></h3>
</div>
</div>


Example fiddle HERE

Answer

flexbox can do that

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo