How to make the shadow (css) overlap the content

I have a fairly simple component, as you can see. The main div (id='main') has a shadow property. And there is also a second div (id='sub') , which contains a lot of content (buttons, dropdowns, etc. However, I simplified the code in the example above).

The problem is that when the content is scrolled, the components (buttons, dropdowns, etc) in the content overlap the shadow (that is, in some places the shadow is not visible when scrolling)

Question: how can I make the shadow overlap the content?

  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>

);

You could consider having another element within the main container that has the shadow. Have this element stack over the top of the elements so that its shadow overlaps everything.

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="h-screen">
  <div id='main' class="flex h-full relative">
    <div class="absolute inset-0 shadow-[inset_0_10px_3px_red] pointer-events-none"></div>
    <div id='sub' class="overflow-auto" style="width: 100vw">
      <div class="h-[50vh] bg-blue-200">Some text</div>
      <div class="h-[50vh] bg-sky-200">Some text</div>
      <div class="h-[50vh] bg-cyan-200">Some text</div>
      <div class="h-[50vh] bg-teal-200">Some text</div>
      <div class="h-[50vh] bg-emerald-200">Some text</div>
    </div>
  </div>
</div>