Flexbox keep equal height on vertically stacked boxes [duplicate]

Question

I have a bunch of links that has the appearance of larger boxes, and the content and height often varies. Using flexbox to give them equal height on each row is easy. I use the Bootstrap grid layout, and when each box is stacked vertically (one on each row) on a smaller screen size, then I can't get flexbox to set the same height on them. I hoped I could solve the problem by changing flow-direction to column from row, but no.

Is there any way to solve this without using javascript hack?

Relevant parent container css:

display: flex;
flex-direction: row;
flex-flow: row wrap;

Child link (flex)boxes:

display: flex;

Pseudo code:

<div class="flex-container>
   <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
     <h2>Test2</h2>
     <div><img src="/ds" alt="Hi" /></div>
     <div>sadsafmf sløfmkls</div>
   </a>
   <a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
     <h2>Test3</h2>
     <div><img src="/ds" alt="Hi" /></div>
     <div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
   </a>
</div>

Answer 1

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>