Flexbox：等高行？

Question

我有两个并排的方框，分别包含标题，图像，一行元信息和一个简短的段落。图片和其他信息的大小将始终相同，但是标题和段落的长度可能会有很大差异。大致结构：

.container {
  display: flex;
  align-items: stretch;
}

.col-md-6 {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  flex: 1 0 auto;
}

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="title">
        <h2>Any length of title...</h2>
      </div>
      <div class="img">
        <img src="#">
      </div>
      <div class="meta">
        <p>Same info here</p>
      </div>
      <div class="content">
        <p>Lorem ipsum et cetera...</p>
      </div>
    </div>
  </div>
</div>

我尝试了各种不同的CSS，并且几乎在一个实例（https://codepen.io/nickfindley/pen/WPxWNJ）中工作，而在另一个实例（https://codepen.io/nickfindley/pen/GzbbOQ）中却根本没有工作。我认为flexbox就是答案，但是我认为flex-grow，flex-shrink或flex-basis不够理解，无法正常工作。我是在树上吠叫还是需要其他解决方案？

Answer 1

尝试一下：

.flex-container {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;

flex-direction: row;
-webkit-flex-flow: row;
justify-content: space-evenly;

padding: 0;
margin: 0;
list-style: none;
position: relative;
text-align: center;

.row {
position: relative;
}

对两个框都执行此操作，并使用（.row类的）边距和填充进行正确处理。我之前已经做了类似的事情，这应该可以工作。