In Tailwind, how do I fill the remaining space of the parent without overflowing?

I am using Tailwind CSS to style my React app. I am having trouble dealing with text which overflows from a flex container.

For simplicity, I have divided my screen into 4 quadrants.

In Quadrant 4, my "Lorem Ipsum" text overflows it's container. The Q4 container gets it's own scrollbar as expected (Image 1).

My issue is that the entire app also gets a scrollbar. Furthermore, the Q4 container overflows the "flex-col" element (Image 2).

My understanding (which must be incorrect), is that because my parent element uses className='h-screen', and because the children use className='h-full' (i.e. 100% of the parent), no container should overflow the screen size.

This is my code with the Lorem ipsum text truncated:

import React from 'react';

const exampleText = `Lorem ipsum dolor sit amet...`;

const Test = () => {
  return (
    <div className='h-screen'>
      <div id='flex-col' className='flex flex-col border-2 border-slate-600 h-full'>
        <div id='row1' className='flex flex-row border-2 border-red-600'>
          <div id='q1' className='basis-1/2 border-2 border-blue-500'>
            Q1
          </div>
          <div id='q2' className='basis-1/2 border-2 border-blue-500'>
            Q2
          </div>
        </div>
        <div id='row2' className='flex flex-row border-2 border-red-600 h-full'>
          <div id='q3' className='basis-1/2 border-2 border-blue-500'>
            Q3
          </div>
          <div id='q4' className='h-full basis-1/2 border-2 border-blue-500'>
            <div className='h-full overflow-auto'>{exampleText}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Test;

Image 1:

Image 2:

Consider removing height: 100% (h-full) from #row2. This is making the height of #row2 effectively height: 100vh after "inheriting" down the height 100% from its parents. Since there is an element before it, this would mean that the overall height of #row1 + #row2 would be more than the 100vh, hence the document scroll.

Apply flex-grow: 1 via grow to #row2 so that it fills the "leftover" height of the flex layout.

Apply min-height: 0 via min-h-0 to #row2 to override the implicit min-height: min-content so it does grow in height beyond the container.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class='h-screen'>
  <div id='flex-col' class='flex flex-col border-2 border-slate-600 h-full'>
    <div id='row1' class='flex flex-row border-2 border-red-600'>
      <div id='q1' class='basis-1/2 border-2 border-blue-500'>
        Q1
      </div>
      <div id='q2' class='basis-1/2 border-2 border-blue-500'>
        Q2
      </div>
    </div>
    <div id='row2' class='flex flex-row border-2 border-red-600 grow min-h-0'>
      <div id='q3' class='basis-1/2 border-2 border-blue-500'>
        Q3
      </div>
      <div id='q4' class='basis-1/2 border-2 border-blue-500 h-full'>
        <div class='h-full overflow-auto'>
          Lorem ipsum dolor sit amet...
          <div class="h-[200vh]"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->