how to make div scroll internally tailwind css

Question

I have a dashboard with two sides, a nav on the left and the main content on the right, simple. They both are housed by a main div which has the height of the current screen. I need the main content div to scroll internally not scroll with the entire view when content overflows. All this while the nav on the right remains as is without being affected by the content overflow on the main content 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>

How can I achieve this

Answer 1

Codepen

You have to give the main content container a max height of screen height. Kindly refer the pen for experimentation or look at code below.

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