I have this code, in an app that uses Tailwind CSS.

<div class="flex flex-col h-full">
    <div class="shrink-0">
        <!-- TITLE CONTENT -->
    </div>
    <div class="grow overflow-y-auto">
        <!-- MAIN CONTENT -->
    </div>
</div>

Since the main container of my app has a defined height (.h-screen), when the MAIN CONTENT part is empty or has little content, the .grow div correctly grows to take the remaining space available.

What I don’t understand is, since the browser obviously knows how much space is left, why does the .grow div keep growing when the content overflows, instead of giving me a scrollbar?

I have tried several combinations of flex, flex-shrink, flex-grow, flex-1, soon the only option I will have will be to specifically tell the app how big the upper divs should be and then calculate the remaining space, but flex is specifically designed to avoid having to do that anymore. The .grow div already knows the height it should have, how can we lock it to that height, even if the height of its content becomes bigger?