Flexbox keep equal height on vertically stacked boxes
This question already has an answer here:
No...equal height only works on the same row...so when the elements wrap they no longer get the equal heights. If the flex-direction is column it CAN work provided there is enough vertical space for both of the elements to be the same height (2* the largest). If not, the container won't stretch to accomodate the two divs at the same size.
.container {
margin-bottom:10px;
}
.col-sm-6 {
border:1px solid grey;
flex:1;
}
.fixed {
height: 250px;
}
.flex-container {
display: flex;
flex-direction: column;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row fixed flex-container">
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Same Height</h2>
<div>sadsafmf sløfmkls</div>
</a>
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Same Height</h2>
<div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
</a>
</div>
</div>
<div class="container">
<div class="row flex-container">
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Shorter</h2>
<div>sadsafmf sløfmkls</div>
</a>
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Taller</h2>
<div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
</a>
</div>
</div> Simply add align-self:stretch to the box element. Also height: 100% on the child may work.