Tailwind CSS - Creating a Kanban board - html

Question

I'm trying to create a kanban board with tailwind css.
but I'm facing an issue when there are a lot of items in a list.
the list height grows and I'm not able to scroll. because I've added overflow-y-hidden to the container.
the max height of the list should not be greater the container and if there are more items I want to show a scroll bar instead.
How can I achieve this?
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div
class="absolute top-0 bottom-0 left-0 right-0 flex items-start pb-16 overflow-x-auto overflow-y-hidden select-none "
>
<!-- List Start -->
<div class="mx-1 bg-white border rounded-lg" style="min-width: 260px">
<!-- Header Start -->
<div class="flex items-center px-4 py-3 space-x-2 border-b">
<h2 class="text-sm font-medium uppercase">Approved</h2>
</div>
<!-- Header End -->
<!-- Items Start -->
<div
class="relative flex flex-col h-full px-4 py-4 space-y-3 overflow-auto bg-white "
style="background: white none repeat scroll 0% 0%"
>
<div
class="flex items-center w-full px-1 text-sm border rounded-lg shadow-sm cursor-pointer select-none group"
style="background: white none repeat scroll 0% 0%"
>
<button type="button" class="inline-block w-full py-2 text-left">
Create email templates for BPM
</button>
</div>
</div>
<!-- Items End -->
<!-- Add New Start -->
<div class="flex items-center px-4 pb-4">
<button
type="button"
class="flex items-center px-2 py-1 space-x-2 text-gray-700 rounded-md hover:bg-gray-100"
>
<span>Add New</span>
</button>
</div>
<!-- Add New End -->
</div>
<!-- List End -->
</div>

Answer 1

From the tailwind docs:
Use overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike .overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.
<div class="overflow-auto h-32 ...">Lorem ipsum dolor sit amet...</div>