顺风过度滚动无法正常工作

Tailwind overscroll y not working properly

我正在构建一个 laravel/tailwind 仪表板，但我现在面临元素溢出的问题。

我要实现的设计如下：

到目前为止我取得的成就如下：

使用此代码结构：

<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>

问题

我希望只有 body 可以滚动，并且随时将侧边栏和导航栏保持在相同的固定位置。

不幸的是，当我将 overflow-y-auto class 添加到正文所在的 div 时，溢出应用于整个 window 破坏了设计。

关于如何使用上述代码库使正文可滚动，您有什么建议吗？

谢谢

方法一：使用fixedclasses

想法：使 nav 和 aside 元素 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>

方法二：使用stickyclass

<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>

您可能需要尝试使用 div 宽度，因为我只是粗略地观察 w-4/5 和 w-60 classes.

的值