title: Aligning to the bottom in flexbox
body: <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>