Make tailwind overflow just for the child

So I was trying to create a dashboard for a side project and I want to create a scrollable part where the user can search/filter some results.

The project is in tailwind and svelte.

So here’s the issue, if I have more results than what can fit on a page, the div overflows, which is fine but the problem is that the entire div overflows instead of the part with more elements than needed.

This is a playground with the full code here, please make the window with the results bigger.

The is bigger than the div that overflows and the parent div is then scrollable when just the ul should be

<div class="h-full">
<section class="bg-[#F1F6FA] h-full   p-4">
    <div class="mx-auto max-w-screen-xl  h-full">
        <div
            class=" overflow-y-auto h-full lg:grid lg:grid-cols-4  lg:items-start lg:gap-8"
        >
            <div
                class="hidden space-y-4 h-full overflow-y-scroll  bg-white rounded-md p-4  border shadow-md lg:block"
            >


                <div>
                    <p class="block text-xs font-medium text-gray-700">
                        Filters
                    </p>

                    <div class="mt-1 space-y-2">
  
                    </div>
                </div>
            </div>

            <div class="lg:col-span-3 ">
                <div class="relative mb-4">
  
                </div>

                <ul class="overflow-y-auto">
                    <li>

                    </li>
                    
                    <li>

                    </li>

                    <li>

                    </li>
                </ul>


                <ol class="flex justify-center gap-1 mt-4 text-xs font-medium">

     
                </ol>
            </div>
        </div>
    </div>
</section>

</div>