title: flexbox sticky header and footer issue
body: <p>I have tried so many things, that got to be completely lost with this matter.</p>
  
  <p>With flexbox, I'm trying to make the layout look and behave as in the following picture:</p>
  
  <p><a href="https://i.stack.imgur.com/szQve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/szQve.png" alt="enter image description here"></a></p>
  
  <p>And, I guess the worst part is that I cannot de-attach the footer(class <code>step-wrapper</code>). I have to keep it inside the <code>#app</code> element.</p>
  
  <p>Another issue, now, is that the header will dissapear entirely when the height of the page is less than the page of the <code>page-container</code>.</p>
  
  <p>Simplified code:</p>
  
  <p><code>HTML</code>
      
          </p>
  
  <pre><code>        &lt;header class="main-header-c"&gt;
              &lt;nav class="navbar navbar-static-top" role="navigation"&gt;
                  &lt;div class="navbar-custom-menu"&gt;
                      &lt;a href="#" class="logo"&gt;Logo&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
  
         &lt;div class="page-content"&gt;
             &lt;div id="app"&gt;
                  &lt;ol class="step-indicator"&gt;
                     &lt;li&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;/li&gt;
                  &lt;/ol&gt; 
  
                  &lt;div class="m-b-md"&gt;
                      &lt;p&gt;Content of tab&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="step-wrapper active"&gt;
                      &lt;button class="btn btn-primary" disabled="disabled"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>CSS</code></p>
  
  <pre><code>        html, body {
              background-color: #fff;
              color: #333;
              font-family: sans-serif;
              font-weight: 100;
              height: 100vh;
              margin: 0;
          }
  
          .full-height {
              height: 100vh;
          }
  
          .flex-center {
              align-items: center;
              display: flex;
              justify-content: center;
          }
  
          .position-ref {
              position: relative;
          }
  
  
          .page-content {
              text-align: center;
          }
  
          .m-b-md {
              margin-bottom: 30px;
          }
  
          .page {
              display: flex;
              flex-direction: column;
              flex: 1 1 auto;
              position: relative;/* need this to position inner content */
              overflow-y: auto;
              justify-content: space-around;
          }
  
          .main-header-c {
              flex: 1 1 auto;
              position: relative;/* need this to position inner content */
          }
  
          .step-wrapper {
              flex: 0 0 auto;
              align-self: flex-end;
          }
  </code></pre>
  
  <p>Full Code at: <a href="http://codepen.io/AngelinCalu/pen/KWVYqd" rel="nofollow noreferrer">http://codepen.io/AngelinCalu/pen/KWVYqd</a></p>
  
  <p>Any ideas?</p>