Aligning to the bottom in flexbox
<p>I have containers that should change height dynamically depending on the content.  For all containers in a given row, the bottom text should all be fixed to the bottom regardless of content in each one's container.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-list {
  display: flex;
  flex-direction: column;
}
.flex-list .flex-row {
  display: flex;
  margin-bottom: 20px;
}
.flex-list .flex-row .flex-item-wrapper {
  margin-right: 20px;
  width: 100%;
  background-color: yellow;
}
.flex-list .flex-row .flex-item-wrapper:last-child {
  margin-right: 0px;
  background-color: transparent;
}
.flex-list .flex-row .flex-item-wrapper .flex-item {
  width: 100%;
  height: 100%;
}
.flex-item-stats {
  display: flex;
  justify-content: space-between;
  color: grey;
  padding-top: 10px;
}
.flex-item-stats &gt; * {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.caption {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="profile-content flex-list"&gt;
  &lt;div class="flex-row"&gt;
    &lt;div class="flex-item-wrapper"&gt;
      &lt;div class="flex-item thumbnail clickable" data-href="#"&gt;
        &lt;img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"&gt;
        &lt;div class="caption"&gt;
          &lt;h4&gt;
                &lt;a href="#"&gt;Y-find&lt;/a&gt;
              &lt;/h4&gt;
          &lt;div class="flex-item-stats"&gt;
            &lt;small&gt;left&lt;/small&gt;
            &lt;small&gt;right&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item-wrapper"&gt;
      &lt;div class="flex-item thumbnail clickable" data-href="#"&gt;
        &lt;img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"&gt;
        &lt;div class="caption"&gt;
          &lt;h4&gt;
                &lt;a href="#"&gt;Cardguard Namfix&lt;/a&gt;
              &lt;/h4&gt;
          &lt;div class="flex-item-stats"&gt;
            &lt;small&gt;left&lt;/small&gt;
            &lt;small&gt;right&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item-wrapper"&gt;
      &lt;div class="flex-item thumbnail clickable" data-href="#"&gt;
        &lt;img class="img-circle" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" style="width:150px"&gt;
        &lt;div class="caption"&gt;
          &lt;h4&gt;
                &lt;a href="#"&gt;Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch Voyatouch &lt;/a&gt;
              &lt;/h4&gt;
          &lt;div class="flex-item-stats"&gt;
            &lt;small&gt;left&lt;/small&gt;
            &lt;small&gt;right&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-item-wrapper"&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>I thought using <code>display:flex</code> on <code>.caption</code> along with <code>space-between</code> would work to push <code>flex-item-stats</code> to the bottom but it doesn't seem to be doing anything.</p>
<p><a href="https://jsfiddle.net/qkf1yjLb/" rel="nofollow noreferrer">jsfiddle</a></p>