want to show the child outside the scroll container but still want the child to be scrollable within the scroll container space

Question

<div class="grid h-screen  place-content-center">
<!--the problem-->
<div class="flex  h-36 w-20 items-center overflow-y-scroll  border-2 border-red-400">
    <div class="relative h-48 w-28 bg-green-300">
<!--this child can either be placed outside of scroll container or it can be hidden within the container and get scrolled-->
      <div class="h-8 w-8 absolute -left-3 top-14 bg-black"></div>
<!------------------------------------------------------------------>
<!----------dummy sibling to know that element are suppose to scroll when we move the scrollbar---->    
     <p>0000000</p>
      <p>0000000</p>
      <p>0000000</p>
      <p>0000000</p>
      <p>1111111</p>
      <p>1111111</p>
<!------------------------------------------------------------------------------------------>
    </div>
  </div>
<!------>
</div>

i want to allow the positioned element to be scrollable and be outside of the overflow container. i don't want my absolute element to be cropped of by the overflow-y-scroll. use the tailwind playground to try out your solution