Search code examples
csstailwind-csstailwind-3

Tailwind overscroll y not working properly

I'm building a laravel/tailwind dashboard but I'm now facing an issue with the overflow of an element.

The design I want to achieve is the follwing : design

And what i achieved until now is the following: enter image description here

With this code structure :

<body>
    <div id="app" class="max-h-screen flex flex-col">
    <nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0">
        
    </nav>

    <div class="flex max-h-full grid grid-cols-8">
        <aside class="h-full flex col-span-1" aria-label="Sidebar"  id="sidebar">
            
        </aside>  
        <div class="w-full bg-gray-100 p-5 col-span-7 flex-1 m-0">
            
        </div> 
    </div>
</div>

</body>

The issue

I would like to have only the body as scrollable ans keep the sidebar and the navbar in the same fixed position they are at any time.

Unfortunately, when i add the overflow-y-auto class to the div where the body is, the overflow is applied to the whole window breaking the design.

Do you have any suggestion on how i can make only the body scrollable with the above code base?

Thank you

Solution

  • Method 1: using fixed classes

    Idea : make the nav and aside elements fixed

    <body>
    <div id="app" class="h-screen flex flex-col">
        <nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
        
        </nav>
        <aside class="h-screen fixed top-0 left-0 w-60 flex col-span-1" aria-label="Sidebar"  id="sidebar">
            
        </aside>  
        <div class="w-4/5 ml-auto bg-gray-100 p-5 col-span-7 flex-1 overflow-y">
            
        </div> 
    </div>
</body>

    Method 2: using sticky class

    <body>
    <div id="app" class="max-h-screen flex flex-col">
        <nav class="bg-white border-gray-200 flex flex-wrap h-fit justify-between shadow items-center p-0 m-0 w-full fixed top-0 left-0 z-10">
            
        </nav>
    
        <div class="flex max-h-full grid grid-cols-8 relative h-screen overflow-hidden">
            <aside class="h-screen flex col-span-1 sticky top-0" aria-label="Sidebar"  id="sidebar">
                
            </aside>  
            <div class="w-full overflow-auto bg-gray-100 p-5 col-span-7 flex-1 m-0">
                
            </div> 
        </div>
    </div>
</body>

    You might have to experiment with the div widths as I am just roughly eyeballing the values with w-4/5 and w-60 classes.