title: Dynamically make div fill remaining space based on sibling height
body: <p>I am trying to dynamically make a <code>div</code> fill remaining space in the window based on sibling height. </p>
  
  <p>The idea is that if the <code>header</code> div changes height the <code>page-wrapper</code> will dynamically  change its height based on the remaining space. (avoid overflow if the <code>header</code> div changes height) </p>
  
  <p><strong>Header.sass</strong></p>
  
  <pre><code>.header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 2rem;
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;
        &lt;div class="header"&gt;
          &lt;div&gt;
            ...
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="page-wrapper"&gt;
          div will fill remaining space
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Current solution</strong></p>
  
  <p>i understand i can achieve this using <code>cal()</code> however this will involve changing the hard coded value for <code>$headerHeight</code> if the <code>header</code> height changes</p>
  
  <pre><code>.page-wrapper {
     height: calc(100vh - #{$headerHeight});
     background-color: red;
  }
  </code></pre>