JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test
<br>
Test

<div class="cover">

</div>
</div>

</div>

CSS

.main
{
  height:300px;  
  width:150px;
  background:red;
  overflow:auto;
  position:relative;
}

.main > div { position: relative; }

.cover
{
    position:absolute;
    height:auto;  
    width:100%;
    top:0;
    bottom:0;
    background: rgba(0, 255, 0, .5);
		z-index: 2;
}