Html Question posted in
Some basic documentation can be found here.

Html – Tailwind CSS: 'overflow-y' Property Not Scrolling Entirely to Bottom with 'top-[63px]

I’m encountering an issue with my Tailwind CSS code that seems to prevent 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>

Issue Explanation:

I’m using Tailwind CSS classes (top-[63px], overflow-y-auto, etc.) to style the aside element, intending it to be a scrollable sidebar. However, it seems that the top-[63px] style is causing the scrolling to stop before reaching the bottom of the aside, leaving some content inaccessible. In this case <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> When there’s too many <li>

Here’s a codepen:

https://codepen.io/Corbin/pen/vYPEeVB

I would appreciate any insights, suggestions, or alternative approaches to achieving a scrollable aside while maintaining the desired layout.

Tags:

2

Answers


  1. 0

    Add custom css to 2nd child of aside

    aside div:nth-child(2) {
  height: calc(100vh - 63px)
}
    Login or Signup to reply.
  2. 0

    What you have to do to keep the whole area in view is subtract 63px from the element height since you are offsetting it from the top. You can use a tailwind class h-[calc(100vh-63px)] instead of h-full wherever the top-[63px] is used. Also note codepen may not reflect the fix so test in your environment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search