title: Why is this div with 100vh height not covering the whole viewport?
body: <p>The blue div in this code has a height of 100vh whereas the red div has the height of 5000px. Shouldn't the blue div extend itself to cover the whole viewport because of the 100vh height attribute?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: absolute; left: 35%; width: 100px; height: 100vh; background-color: blue;"&gt;
  &lt;/div&gt;
  &lt;div style="position: absolute; left: 50%; width: 100px; height: 5000px; background-color: red;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want to achieve from this is that suppose there's some text which overflows on sizing down the window then how should I get around that situation so that the 100vh height div again covers up the new window size?</p>