title: position absolute removes the vertical scroll from an element
body: <p>My code is as shown below:</p>
  
  <p>xyz.html</p>
  
  <pre><code>&lt;div class='home-container'&gt;
  
      &lt;div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400"&gt;
  
      &lt;div class="menu-main"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>xyz.css</p>
  
  <pre><code>.home-container {
      width: 100vw;
      height: 100vh;
      overflow-y: scroll;
      background: #fcfcfc;
  }
  
  
  .home-container .menu-main {
      width: 43%;
      height:3000px;
      position: absolute;
      background-color: red;
      left: 300px;
  }
  </code></pre>
  
  <p>But somehow, as soon as I insert <code>position:absolute</code> in <code>menu-main</code>, it looses its scrolling capabilities. So how can I acheive both scrolling and position absolute at the same time?</p>