how to make background content scrollable with CSS when Masked on the foreground

I want to be able to scroll through the bg content, even when I have the overlay opened.
How can I also make the background content scrollable?
I’ve also checked other places where there are similar questions raised, but hasn’t helped me for this particular instance.

CSS:

.main{
  position: relative;
}
.masked-content {
  height: 150px;
  overflow: auto;
 
}
.mask {
   background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    cursor: default;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    }

JS:

<div class="main">
  <div class="masked-content">This is some text covered by the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the maskSome contents above the mask</div>

  <div>
    <div class="mask">Some contents above the mask</div>
  </div>
</div>

Fiddle:

https://jsfiddle.net/43w7xzL0/

any ideas?

>Solution :

Set pointer-events: none on the mask to let the scroll events through to the element(s) behind.

.mask {
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events