title: height:100vh; going beyond window height even though max-height was set to 100%
body: <p>I am trying to set up a gradient which covers the whole page</p>
  <p>This is my code:</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>#login .row div:nth-of-type(1) {
       height: 100vh;
       max-height: 1%;
   
       background: #642B73;  /* fallback for old browsers */
       background: -webkit-linear-gradient(to right, #C6426E, #642B73);  /* Chrome 10-25, Safari 5.1-6 */
       background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 
   26+, Opera 12+, Safari 7+ */
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
    &lt;div class="container-fluid" id="app"&gt;
     &lt;div id="login"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(I know I have written <code>max-height: 1%;</code>, read on)</p>
  <p>Now as I said <code>height: 100%;</code> wasn't working, so I tried using various inputs, what I saw was when I used pixels for max-height, there were changes to the height of the gradient but no matter what input I choose for <code>max-height</code> in percentage, height of the gradient would remain the same, for example here in my code I have used <code>max-height: 1%;</code> and the gradient is still going beyond the height of the webpage.</p>
  <p>I checked in the dev-tools and the max-height property was getting applied, so I am confused what is up?</p>