title: flexbox sticky footer
body: <p>I'm trying to achieve more or less the same of what is described in this question:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox">Align an element to bottom with flexbox</a> </li>
  </ul>
  
  <p>except for the fact that i can't use fixed heights.</p>
  
  <p>I have set of two cards that are already in a flex context (their heights are stretched with flexbox):</p>
  
  <p><a href="https://i.stack.imgur.com/ehmpo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ehmpo.png" alt="enter image description here"></a></p>
  
  <p>Inside the card I have a series of elements:</p>
  
  <ul>
  <li>a header</li>
  <li>a body</li>
  <li>a footer (the blue div)</li>
  </ul>
  
  <p>What I want is the footer to always stick to the bottom.</p>
  
  <p>The inner container of the three elements described above have the following CSS:</p>
  
  <pre><code>.card-inner {
    display:flex;
    flex-flow :row wrap;
    align-items: stretch;
  }
  </code></pre>
  
  <p>and the items inside have</p>
  
  <pre><code>.card {
    &amp;-header,
    &amp;-body {
      flex: 0 1 100%;
    }
    &amp;-footer {
      flex: 0 1 100%;
      align-self:flex-end;
      margin-top: auto;
    }
  }
  </code></pre>
  
  <p>I would have expected that <code>align-self:flex-end</code> or <code>margin-top: auto</code> would have pushed the footer div down the card, but this is not happening.</p>
  
  <p>Maybe the two flex contexts don't <em>speak</em> to each other and are not related? Or maybe without a height to the inner container, the flex context ends when the content flow ends?</p>
  
  <p>Is there a way to achieve this using no heights with flexbox?</p>
  
  <p>Here's a codepen example: <a href="https://codepen.io/vlrprbttst/pen/QgWbEr" rel="nofollow noreferrer">https://codepen.io/vlrprbttst/pen/QgWbEr</a></p>