如何使 div 内部顺风滚动 css

Question

我有一个仪表板，有两个面，左边是导航，右边是主要内容，很简单。它们都由具有当前屏幕高度的 main div 容纳。我需要主要内容 div 在内部滚动，而不是在内容溢出时随整个视图一起滚动。所有这一切，而右侧的导航保持原样，不受主要内容溢出的影响 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>

如何使 div 内部顺风滚动 css

how to make div scroll internally tailwind css

css

scroll

tailwind-css