title: FlexBox with static and scrollable elements
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="header"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styling:</p>
  
  <pre><code>#container {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  </code></pre>
  
  <p>I would like to have the following:</p>
  
  <ol>
  <li>Make <code>header</code> fixed, i.e. not scroll</li>
  <li>Have <code>content</code> directly under <code>header</code>, i.e. if the height of <code>header</code> changes, there should be no overlap between the elements</li>
  <li>Have <code>content</code> scroll vertically</li>
  <li>As a side note: both <code>header</code> and <code>content</code> are flex containers</li>
  <li>The <code>header</code> has a number of <code>&lt;a&gt;</code> elements with <code>href</code> linking to elements on <code>content</code>, which is used to scroll to the selected element on click</li>
  </ol>