I'm working on implementing a unique layout using Tailwind CSS for a dashboard.
The height of the initial view should match the screen size and remain within those limits at all times.
Initially, the blue section of the dashboard will be empty (but it must fill the entire designated area even when empty). As information is added, the content in this blue area will grow beyond its boundaries. When this occurs, I want the blue area to overflow along the Y-axis with a scrollbar. However, my issue is that when overflow happens, the entire page overflows rather than just the blue section, causing the column to extend beyond the screen's limits.
I have created a CodePen with the current HTML code that I am working with.
<div class="h-screen bg-black flex flex-col">
<div class="bg-green-200">NAVBAR</div>
<div class="bg-blue-200 flex-1">
<div class="flex h-full">
<!-- LEFT -->
<div class="flex-1 bg-yellow-200">
<div class="flex flex-col h-full">
<div class="flex-1 bg-blue-800 text-white text-2xl p-8">
This is the only area that will be growing
and should eventually overflow displaying
scrollbars only in the blue area.
What I'm having problem with is to initially
use all the available blue space and then when
the content overflows not making the whole page
scrolldown, only this blue section.
<!-- DIVS HERE SHOULD GROW AND OVERFLOW -->
<!-- Uncommenting the following statements will
show what is my current problem -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
<!-- <div class="mb-32">.</div> -->
</div>
<div class="flex-none bg-red-200 h-32">
This will always be fixed height
</div>
<div class="flex-none bg-red-300 h-20">
This will always be fixed height
</div>
</div>
</div>
<!-- //LEFT -->
<div class="flex-1 bg-yellow-300">MIDDLE</div>
<div class="flex-1 bg-yellow-400">RIGHT</div>
</div>
</div>
<div class="bg-green-200">
The Footer should always be visible
</div>
</div>
Any assistance with this challenge would be greatly appreciated.