scrollable content

Based on: https://twitter.com/steveschoger/status/981606881255976961

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<div class="h-screen main-container" >

    <div class="p-4 bg-yellow-500">
        <div class="h-10 bg-green-500">

        </div>
        <div class="h-10 bg-blue-500">

        </div>
    </div>

    <div class="flex secondary-container">
        <div class="w-48">
            sidebar
        </div>

        <div class="w-full bg-indigo-500 p-2 tertiary-container ">

            <div class="h-10 bg-orange-500 w-full">
                topnav
            </div>
            <div class=" flex-1 relative z-0 overflow-y-auto   bg-green-500 h-screen">
                content
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3">Last One</div>

            </div>

        </div>
    </div>


</div>

CSS

.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.h-40 { height: 10rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-24 { margin-top: -6rem; }

.main-container {
  display: flex;
  flex-direction: column;
  /* overflow: hidden is not necessary */
}

.secondary-container {
  overflow: auto;
}

.tertiary-container {
    display: flex;
    flex-direction: column;
}