Problem with overflow in TailwindCSS layout

Question

I'm trying to achieve the following layout in Tailwind CSS for a dashboard.

The initial height will be the screen size and should never exceed the initial height.

The blue area of the dashboard is going to be empty initially (but it should occupy the whole area even when empty) and it will start adding information that eventually will outgrow the designated blue area and when that happens I would like that area to overflow in Y-axis with a scrollbar. My problem is that when the overflow happens the whole page overflows not just the blue section making that column going under the limits of the screen.

I created a CodePen with the HTML code that I currently have.

<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 help will be really appreciated

Answer 1

I eventually managed to accomplish what I wanted and I'm sharing the code here, it seems I was misusing the overflow properties. With this the section can grow while the rest of the sections remain flexible but fixed.

<div class="h-screen bg-black flex flex-col">
  <div class="bg-green-200">NAVBAR WORKING</div>
  <div class="bg-black flex flex-col h-full overflow-y-auto">
    <!-- THREE COLUMNS LAYOUT -->
    <div class="flex h-full">
      
      <!-- COLUMN ONE -->
      <div class="flex-1 flex flex-col bg-white">
        
        <div class="flex flex-col bg-red-500 h-full">
          
          <div class="bg-white h-full flex-grow-0 overflow-y-auto">
            <div class="flex flex-col">
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
            </div>
          </div>
          
          <div class="bg-red-200 h-32 flex-none">
            This will always be fixed height
          </div>
          
          <div class="bg-red-300 h-20 flex-none">
            This will always be fixed height
          </div>
          
        </div>
        
      </div>
      <!-- COLUMN ONE -->
      
      <!-- COLUMN TWO -->
      <div class="flex-1 bg-yellow-300">MIDDLE</div>
      <!-- COLUMN TWO -->
      
    </div>
    <!-- THREE COLUMNS LAYOUT -->
  </div>
  <div class="bg-green-200">
    The Footer should always be visible
  </div>
</div>