title: Make a flexbox middle part scroll, without the container taking 100% of the page
body: <p>Making a flexbox child have a scroll bar instead of growing, takes a container with fixed height.
  easy to create in a an isolated environment:</p>
  
  <pre><code> #container {
    height: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-flow: column;
  }
  
  #list {
    display: flex;
    flex-flow: column;
    overflow: auto;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/1yjk5ojp/" rel="nofollow noreferrer">https://jsfiddle.net/1yjk5ojp/</a></p>
  
  <p>but let's say i want to use a page header.
  i don't know it's exact size, so i can't use aboslute position with mergin.
  i also can't use any flex component along the way, cuz it's must be fixed size.</p>
  
  <p>for example - added a 100px header</p>
  
  <pre><code>&lt;div style="height: 100px;"&gt;
    &lt;h1&gt;Page header&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/z6dsq822/1/" rel="nofollow noreferrer">https://jsfiddle.net/z6dsq822/1/</a></p>
  
  <p>is there anything i can do to make a fixed height component after an unknown size component?</p>
  
  <p>my constrains are that i don't want another scroll bar, and i want the header to be outside this structure (it's a large application with different views, the header is in a template)</p>