This component may seem simple at first glance. The main div with the ID 'main' features a shadow property, while a second div with the ID 'sub' contains an array of interactive elements (buttons, dropdowns, etc., although the code example above has been simplified).
An issue arises when scrolling through the content, as the components within the content start to overlap the shadow effect. This results in certain areas where the shadow is not visible during scrolling.
The question now is: what approach should be taken to ensure that the shadow overlays the content smoothly?
return (
<div id='main' className="flex h-full shadow-[inset_0_10px_3px_red] ">
<div
id='sub'
ref={ref}
className="overflow-auto"
style={{
width: '100vw',
}}
>
<div>Some text</div>
// long list from <div>Some text</div>
<div>Some text</div>
</div>
</div>
);