Flexbox：使用“justify-content：stretch”进行可变拉伸

Question

我有一个row定向的flex容器（行），其中包含n row个定向的flex容器（单元格），其中包含一个固定大小的div（缩略图）和一个column定向嵌套的flex容器

当没有换行时，它会按照我的预期显示，缩略图位于左上角，嵌套容器位于右侧，拉伸以适合父高度。

但是，当单元格包装其内容时，如果内容不足以容纳父级，则嵌套容器仅被拉伸到适合单元格高度的一半。

我希望它与现在位于其上方的固定大小元素相邻。

这有点难以解释，但希望下面的图片更清晰。

未包装：

在下面的图片中，我想要的结果是左侧单元格中的红色和黄色框相邻，橙色框与单元格底部相邻。

裹：

div.container {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: stretch;
  background: purple;
}

div.cell {
  margin: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: stretch;
  padding: 5;
  background: green;
  flex-basis: 0;
  flex-grow: 1;
}

div.thumb {
  width: 100px;
  height: 70px;
  background: red;
}

div.right {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  min-width: 200px;
  justify-content: space-between;
  flex-grow: 1;
  background: blue;
  flex-shrink: 1;
  flex-basis: 0;
}

div.headline {
  background: yellow;
}

div.sub {
  background: orange;
}

<div class="container">
  <div class="cell">
    <div class="thumb"></div>
    <div class="right">
      <div class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan ipsum et pulvinar laoreet.</div>
      <div class="sub">Test</div>
    </div>
  </div>
  <div class="cell">
    <div class="thumb"></div>
    <div class="right">
      <div class="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan ipsum et pulvinar laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan ipsum et pulvinar laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Ut accumsan ipsum et pulvinar laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan ipsum et pulvinar laoreet</div>
      <div class="sub">Test</div>
    </div>
  </div>
</div>

http://codepen.io/fjolnir/pen/QvjKez