One block on the left displays the list, while another shows detailed information with a shadow effect. The issue arises when the left block has 'overflow: scroll', causing elements' backgrounds to spill over the shadow.
.div-left {
float: left;
width: 64px;
max-height: 200px;
overflow-y: scroll;
}
.div-right {
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.8);
display: inline-block;
width: calc(100% - 64px);
}<div>
<div class='div-left'>
<div style="background-color: red;">1</div>
<div style='background: white;'>2</div>
<div>3</div>
<div style="background-color: red;">4</div>
<div>1</div>
<div style='background: red;'>2</div>
<div style='background: white;'>3</div>
<div>4</div>
</div>
<div class='div-right'>Replaced CSS linter with Stylelint which<br>supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await<br>syntax! Replaced CSS linter<br>with Stylelint which supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await syntax!</div>
</div>Is there a way to ensure that the shadow is drawn over the list instead?