Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

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>
When numerous <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.

htmlcsstailwind-css

Answer №1

Apply unique CSS styling to the second child element inside an aside tag

aside > div:nth-child(2) {
  max-width: 80%;
  background-color: #f7f7f7;
  margin-bottom: 20px;
}

Answer №2

To ensure the entire area remains visible, simply deduct 63px from the element's height when offsetting it from the top. Replace instances of h-full with the Tailwind CSS class h-[calc(100vh-63px)] wherever you use top-[63px]. Keep in mind that CodePen may not show the fix accurately, so make sure to test it in your own environment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal a hidden element underneath a see-through layer featuring an adaptable background image spanning the entire webpage

Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it? Also, can the s ...

css

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

javascripthtml

Can CSS stylesheets be set up to automatically load based on the browser being used to access the website?

I am inquiring because I recently completed a beautiful homepage design and, after viewing the website on Chrome and Safari on OSX, I noticed that certain elements were broken when I opened it in Firefox. In addition, an issue I was experiencing with the ...

csshtmlcross-browserstylesheet

Iterate over the array and eliminate any stylesheets

Currently working on a website using WordPress, and dealing with some unwanted css files that come with certain plugins. I've been attempting to remove these stylesheets with JavaScript but keep running into an error saying Failed to execute 'qu ...

javascripthtmljquery

Creating an HTML list that displays the UL Level numbers as the list values can be done by following these steps

Trying to create a styled HTML list with CSS that resembles the following: 1. List item     2. List item         3. List item         3. List item         3. List item   &nbs ...

htmlcsssass

What could be causing my webpage content to be partially hidden by my CSS menu?

I am currently working on my website which features a CSS menu with my website logo, a text box, and a dropdown. Additionally, I have created a login form using a table like the one shown below. <p>&nbsp;</p><table width="40%" border="0 ...

htmlcss

When viewed through the Firefox browser on an Android device, the text on the webpage suddenly enlarg

I currently have the following content displayed on my website: <div style="font-size: 11px; line-height: 17px; text-align: left;"> <p>lorem ipsum etc etc</p> </div> Strangely, despite setting the font size to 11px, the te ...

androidhtmlcssfirefox

Tips for displaying NoOptionsText in MaterialUI Autocomplete based on a specific condition

When using a Material UI autocomplete feature, the items are selected based on the first 3 letters typed. For example, if you're searching for all "Pedros" in your database, typing "Ped" will bring up results starting with those letters. The issue ar ...

javascripthtmlreactjsautocompletematerial-ui

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

javascriptjqueryhtmlcss

Create a dynamic calendar by integrating dates with Javascript and an HTML table

Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...

javascriptjqueryhtmlcsscalendar

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

javascripthtmlcssvue.jsvuetify.js

I am trying to make my CSS divs remain in the exact same position on the background image, even when the browser is resized both horizontally and vertically. How can I achieve this?

I need the red dot divs to remain fixed on a world map, regardless of browser resize. Not sure if I should be adjusting div properties or background. Here's my CSS code, any feedback is appreciated as I'm new to web design: HTML: <!DOCTYPE ...

htmlcss

Why isn't the image utilizing all the available space?

I'm working on creating a simple card to display services, with just an image and some text. However, I'm facing an issue where the image is not taking up the full width and height of the container as expected. Could someone help me figure out w ...

cssreactjsnext.jssass

Issues with authenticating PHP password against MYSQL

I've hit a roadblock while working on my project, and I believe it's a simple fix. However, I just can't seem to figure it out. If you want to see the issue for yourself, check out the live site at www.thriftstoresa.com. The problem lies wi ...

phphtmlmysqlvalidation

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempte ...

javascriptjqueryhtmlcssprinting

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

Is the order of elements in a CSS file important?

In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...

cssmenunested-lists

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg