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

CodePudding user response：

The outer container should be max-h-screen and then set the proper overflow

<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