Flexbox在垂直堆叠的箱子上保持相同的高度
这个问题在这里已经有了答案：
没有......相等的高度只对同一行起作用......所以当元素包裹时它们不再具有相同的高度。 如果弯曲方向是列，它可以工作，只要有足够的垂直空间使两个元件具有相同的高度（最大为2 *）。 如果没有，容器将不会伸展以容纳相同尺寸的两个div。
.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> 只需将align-self:stretch添加到box元素即可。 height: 100%的孩子可能会工作。