How to give a child element the full height of its flex parent with Tailwindcss

Currently I have a viewport with two <div> elements in it: the first on top for navigation, and the second, #container, as a container for all my content. That #container is set to flex-grow so as to fill the remaining part of the viewport.

<template>
    <div class="min-h-screen  flex flex-col">
        <div class="flex-grow-0">
            <navBar :user="user" />
        </div>
        <div id="container" class="flex-grow  flex flex-col">
            <!-- Content is injected here, replacing router-view -->
            <router-view />
        </div>
    </div>
</template>

In that injected content I have several <div> elements, of which I want the first one, #landingPage, to be the full height of the container.

<template>
    <div class="">
        <div id="landingPage" class="min-h-full">
            <!-- This div must be as tall as the container -->
            <p>First part</p>
        </div>
        <div>
            <!-- This div and those that may follow don't matter -->
            <p>Second part</p>
        </div>
    </div>
</template>

But when I set it to min-h-full, it doesn't grow at all and keeps the height of that <p>, and if I set it to min-h-screen, it of course overflows out of the viewport by an amount equal to the height of <navBar>.

I tried experimenting with more flex-classes, but this keeps the second <div> in view, when I just want #landingPage to be visible without scrolling.

How can I make this happen without giving the parent of <navBar> a fixed styling?