Long story short is I'm working on a project where I want to have the content "fill" the vertical space below the static header. I've done this in React with tailwind like this:

```
<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <header class="flex h-18 bg-white shadow-md">
        {/* header menu options */}
    </header>
    <div class="flex flex-1 h-full bg-gray-200 p-6">
        {/* page content */}
    </div>

```

But with NextJS it seems to put the mounting div (i.e. `<div id="__next">`) between the body and the wrest of the content. If I modify the CSS to give `#__next { height: %100 }` but that makes the fill not work correctly, it overflows. So it looks like this:

```
<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <div id="__next">
        <header class="flex h-18 bg-white shadow-md">
            {/* header menu options */}
        </header>
        <div class="flex flex-1 h-full bg-gray-200 p-6">
            {/* page content */}
        </div>
    </div>

```

Here are screenshots to visually see why the extra div is causing problems: <https://imgur.com/a/dHRsDkY>

The two possible options to solve this problem that theoretically might work are add classes to the `#__next` div or mount to body instead of the `#__next` div. Does anyone know how to achieve either of those?

Edit: Yes, I think I could change the layout to a fixed header and padding on top of the content element and that'd sidestep the problem and that may end up being the workaround I need but I'm still interested in knowing if either of the solutions I've mentioned are possible because if they aren't that's a technical limitation of NextJS that doesn't get much attention.