Next.js Discord

Discord Forum

Layout pages sizing problems

Unanswered
Barbet posted this in #help-forum
Open in Discord
BarbetOP
I have my layout file with a nav bar and its child. I want to give the child page the remaining height of the page excluding the nav bar but it's not working. When I set the color of the background inside of the RootLayout itself it is sized correctly but when I try the same thing with the parent of the page it doesnt work.

6 Replies

BarbetOP
I should add that PageWrapper is a component that gives the width and height to full
American Crow
somth like should do the job
<div className="flex min-h-screen flex-col">
  <NavBar />
  <main className="flex-1">{children}</main>
</div>
The main is already taking up all the space. When I put a color on just that specifically it works. The child just isnt inheriting the size
American Crow
If you have a nested div as child e.g.
<main className="flex-1"><div>abc</div></main>
you'll have to keep flex flex-1 downwards e.g.

<main className="flex flex-1">
  <div className="flex-1">abc</div>
</main>