How do I achieve navbar and content div with 2 independently scrollable divs using Tailwind & Nextjs-CodePudding

I am trying to understand how Stripe achieves its layout here: https://stripe.com/docs/payments

That page has a column flexbox div containing 2 child divs: one for the navbar and the second for the main content. The column direction means that the navbar will sit on top of the main content. The navbar does not use sticky and from what I can see it does not use fixed positioning either.

The main content div is a Flexbox with overflow-y: hidden and has 2 child divs: the first for the LHS sidebar and the second for the main page content.

Note that left sidebar and main page content scroll independently and the overall page itself does not scroll at all. Unless I misunderstand what is happening, Stripe appears to be using the overflow-hidden property in the primary div to ensure that the page contents div does not go outside the viewport and hence the overall page is not scrollable. The inner divs use overflow-y-auto to ensure that content inside them is scrollable.

I'm trying to replicate this using the below using Tailwind and Nextjs:

<div  >
         <div >
            <div id="Navbar" >
                Navbar
            </div>
            <div id="MainContent" >
                <div>
                    <div >
                        <div >
                            <div>
                                <p>lhs</p>
                                <p>lhs</p>
                                ... lots more content here to ensure page overflow 

                            </div>
                        </div>
                        <div>
                            Sidebar footer
                        </div>
                    </div>
                </div>
                <div >
                    Content
                </div>
            </div>
        </div>
</div>

However, when I use the above I just get the whole page that scrolls, whereas I'm expecting to see the LHS sidebar containing the list of <p>las</p> elements scroll and LHS sidebar footer and the page as a whole to stay static. There is no change when I add a load of content into the content div. Here's what it looks like: https://play.tailwindcss.com/J6unFAO47B

Whilst I know that I could use a sticky navbar, I'm trying to understand what Stripe is doing in their page and so I want to understand why is my sidebar not scrolling independently of the other areas of the page?

CodePudding user response：

I'm not sure why it's not working in the Tailwind playground - I suspect it's because I'm not setting a height in one of the parent divs. When I do that, it works.

In Nextjs, the solution wast to do this in CSS:

#__next {
  height: 100%;
}

This ensures that the height of the top-most div is set to the height of the viewport and then the overflow seems to work fine as a result.

CodePudding user response：

Check out this: My ans. I hope this solves your problem.