title: 100vh does not apply when switching dynamic react components
body: <p>I have a react app with a form that is dynamic. Every time the form changes the side bar which is set to 100vh doesn't cover the full page.</p>
  <p><a href="https://i.stack.imgur.com/GBq6c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GBq6c.png" alt="enter image description here" /></a></p>
  <p>The CSS for the sidebar is as follows:</p>
  <pre><code>border-right: 1px solid rgb(233, 236, 239);
  background-color: #ffffff;
  height: 100vh !important;
  </code></pre>
  <p>The rendered HTML looks like this:</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;d-flex flex-column flex-shrink-0 p-3 side-bar&quot; style=&quot;width: 280px&quot;&gt;
          &lt;!-- side bar content --&gt;
      &lt;/div&gt;
      &lt;div class=&quot;app-content-inner&quot;&gt;
          &lt;!-- dynamic content rendered here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How do I make sure the sidebar is covering 100% of the page and change when the component changes?</p>