title: Set Flexbox Min Height To Fill Remaining Screen in Scrolling Container
body: <p>I am moderately familiar with Flex-box, but this issue has me baffled:</p>
  
  <p>I am trying to create a flex-box layout that:</p>
  
  <ol>
  <li>Puts a footer at the bottom of the screen IF content is shorter than the screen (view-port)</li>
  <li>Puts footer at end of scrolling content IF content is longer than the screen (view-port)</li>
  </ol>
  
  <p>I can seem to get one, or the other, but not both of these to work. A couple of goals:</p>
  
  <ul>
  <li>Achieve this, if possible, in CSS alone</li>
  <li>The header should remain fixed at the top of the screen, while the content has scrollable overflow</li>
  <li>The header bar will vary in size, so the solution should accommodate
  this</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/lsaHg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lsaHg.png" alt="enter image description here"></a></p>
  
  <p><a href="https://codesandbox.io/embed/material-demo-m2t15?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Codesandbox Demo of Issue</a></p>
  
  <p>Thanks for any help</p>