css - 如何使div在内部顺风css滚动

Question

我有一个仪表板，它有两个面，左边是导航栏，右边是主要内容，很简单。它们都包含在一个主 div 中，该 div 具有当前屏幕的高度。当内容溢出时，我需要主要内容 div 在内部滚动而不是与整个 View 一起滚动。所有这一切，而右侧的导航保持原样，不受主要内容 div 上内容溢出的影响

<main className=" flex flex-row h-screen">

<div className=" w-1/5 h-full flex flex-col flex-grow bg-purple-50">
////This is the side nav
</div>

<div className=" w-4/5 bg-gray-50 h-screen overscroll-auto">
  /// this is the main content div that i need the content inside to scroll internally
  /// what i mean by this is i dont want the whole page to move when there is a lot of content 
  /// just the content inside this div
</div>

</main>

我怎样才能做到这一点

Answer 1

Codepen

你必须给主内容容器一个屏幕高度的最大高度。请引用笔进行实验或查看下面的代码。

<main className=" flex flex-row h-screen">

<div className=" w-1/5 h-full max-h-screen overflow-y-auto flex flex-col flex-grow bg-purple-50">
////This is the side nav
</div>

<div className=" w-4/5 bg-gray-50 max-h-screen overflow-y-auto">
  /// this is the main content div that i need the content inside to scroll internally
  /// what i mean by this is i dont want the whole page to move when there is a lot of content 
  /// just the content inside this div
</div>

</main>