title: Why does flex-basis needs a set height?
body: <p>I have a chat system with a very simple header-body-footer layout, except the body needs to be scrollable. I've been trying to come up with a non-hacky (fixed heights for each viewport) solution and this was the final result, which happened entirely by accident:</p>
  
  <pre><code>  flex-basis: auto;
    overflow-y: scroll;
    height: 1px;
  </code></pre>
  
  <p>It works perfectly across all resolutions, the body takes as much space as it can and the rest of it scrolls as intended. The problem is that i don't really understand this solution, shouldn't <code>flex-basis: auto</code> be sufficient for this calculation to happen? why do i have to set a height?</p>
  
  <p>I've set it as 1px because if height is a value higher than the space available, height takes precedence over flex height.</p>