I have this example of a layout:

<div class="flex flex-col h-full">
    <div>
        This is the main nav
    </div>

    <Separator orientation="horizontal"/>

    <div class="flex h-full">
        <div class="flex flex-col">
            <button> 1 </button>
            <button> 2 </button>
        </div>

        <Separator orientation="vertical"/>

        <main class="max-w-md mx-auto">

            <h1> Content </h1>

            <div>
                <button> do one </button>
                <button> do two? </button>
            </div>

            <div>
                <div class="overflow-y-auto">
                    <!-- This div element should be scrollable! -->
                </div>
            </div>

        </main>

    </div>

</div>

Currently, when the innermost child is getting very long/high, instead of this child being scrollable, the outermost parent becomes scrollable. I want the highlighted child to be scrollable. How do i accomplish this? I believe i dont understand some general things about relative height in flex and overflow mechanism, therefore, i would appreciate alot if this was being elaborated in the solution.

I tried many things similar to the code above, but nothing has worked…