Tailwind - Footer is not sticky and push by when neibouring element is overflow

Issue

Trying several solution from sourceforge seem cannot found it. Appreciate if somebody can found the link to the solution

Issue: I have 3 flex column element

• Sub Header
• Main (with overflow-y-auto)
• Sub Footer

Somehow when main content is overflow, the Sub Footer is push down beyond screen size. Where do I missed ?

The codes: https://play.tailwindcss.com/GHQWK3Fxw1

Solution

The outer container should be max-h-screen and then set the proper overflow. Because the Mainscreen div is flex it will fill the height of it's max-h-screen parent.

<div class="container w-screen bg-green-100">
    <div class="flex flex-col max-h-screen w-full overflow-hidden">
        <!-- Start Header -->
        <div class="py-3 bg-gray-700 text-white text-center">Header</div>
        <!-- End Header -->
        <!-- Start Mainscreen -->
        <div class="flex flex-col mb-auto p-0 overflow-hidden">
            <div class="flex flex-row h-full w-full overflow-hidden">
                <div class="flex w-72 bg-yellow-100">Sidebar</div>
                <!-- Content -->
                <div class="flex w-full max-h-full flex-col overflow-auto">
                    <div class="py-2 bg-gray-100 text-gray-700 text-center">Sub Header</div>
                    <div class="h-full overflow-y-auto p-5"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of t ....</div>
                    <div class="py-5 bg-gray-700 text-center text-white">Sub Footer</div>
                </div>
                <!-- End Content -->
                <div class="flex w-72 bg-purple-100">Rightbar</div>
            </div>
        </div>
        <!-- End Mainscreen -->
    </div>
</div>

Tailwind on Codeply

Answered By - Zim