I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element.
<body>
<div>
<nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b border-gray-200 dark:border-gray-600 h-[63px]">
</nav>
<aside class="hidden sm:flex h-full " aria-label="Sidebar">
<div class="">
<div class="fixed top-[63px] overflow-y-auto z-20 py-5 px-3 w-16 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
</div>
</div>
<div class="overflow-y-auto fixed top-[63px] left-16 z-20 py-5 px-3 w-64 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<ul class="overflow-y-auto w-full">
<li>
<div class=" pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
</ul>
</li>
<!-- More items -->
<li>
<div class=" pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
</ul>
</li>
<li>
<div class="pt-4 pl-2 mb-2 text-sm font-medium text-gray-500 uppercase">Lorem ipsum</div>
<ul>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Lorem ipsum</div>
</li>
<li>
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Last Item</div>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="sm:pl-16 pt-[63px]">
here
</div>
</div>
</div>
</body>
Problem Explanation:
The use of certain Tailwind CSS classes like top-[63px], overflow-y-auto, etc., in styling the aside element is causing an obstruction in smoothly scrolling all the way to the bottom of the aside, making some content inaccessible. Specifically,
<div class="pl-2 flex cursor-pointer font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 hover:dark:text-white">Last Item</div><li> elements exist.
For reference, here's a link to the codepen:
https://codepen.io/Corbin/pen/vYPEeVB
Your insights, suggestions, or different approaches on achieving a scrollable sidebar while maintaining the desired layout would be greatly appreciated.