Fixing overflow issues in nested components of NextJS

On the test page of this demo, the div with Hello Worlds should have vertical scrolling. However, the scrolling appears for the entire page instead.

https://stackblitz.com/edit/stackblitz-starters-l38e7q?file=app%2Fpage.tsx,app%2Ftest%2Fpage.tsx

YouDontKnowMeOP•3/24/24, 8:05 PM

The main layout page has height set to 100dvh.

YouDontKnowMeOP•3/24/24, 8:06 PM

But that does not apply if nested components have a height that exceeds 100dvh. And the scroll bar appears for the entire page.

theoriginalandrew•3/24/24, 9:28 PM

i don't really read tailwind classes but essentially you need to set the page layout section which has the height of 100dvh to have overflow hidden, and then you'd want to set a height + overflow: auto to the content you want to have scrollable.