How to make a div shrink if there is not enough space inside the flexbox for other children

I have this markup:

<div className="wrapper w-full h-full flex flex-col justify-between my-7">
     {/*first*/}
     <div className="w-full h-full min-h-0 outline-dotted outline-green-300 outline-2 p-7 bg-black overflow-y-auto whitespace-break-spaces text-nowrap">
         {data.text}
     </div>
    {/*second*/}
    <div
        className="w-full h-16 mt-5 outline-dotted outline-green-300 outline-2 p-3 bg-black flex justify-between items-center">
        <span className="text-lg font-bold">From: <span className="bg-gray-900 p-1">01/01/2024</span></span>
        <span className="text-lg font-bold">Due: <span className="bg-gray-900 p-1">05/02/2024</span></span>
     </div>
</div>

It's parent:

    <main className="flex flex-col w-full h-full">
        <div className="flex justify-between align-middle items-center h-header w-full border-b border-gray-500">
            <span className="font-bold text-2xl">Display</span>
            <CreateEditModalCallerButton buttonClassName="flex items-center justify-center p-2 hover:bg-opacity-15 hover:bg-black" mode="CREATE">
                <Image className="mr-2 w-6 h-6" src="/assets/plus-solid.svg" alt="pic" width="16" height="16"/>
                <span className="min-md:text-sm max-md:text-base">Add</span>
            </CreateEditModalCallerButton>
        </div>
        <div className="grid grid-rows-1 grid-cols-2 w-full h-full divide-x-2 divide-gray-600 px-7">
            <div className="flex flex-col w-full h-full max-sm:col-span-2 pr-7">
                <HometaskList initialData={initialHometasks}/>
            </div>
            <div className="flex flex-col w-full h-full pl-7 max-sm:hidden">
                {/*Problem is located here*/}
                <HometaskInfo/>
            </div>
        </div>
    </main>

And root layout:

<html lang="en">
  <body className={`${font.className} w-screen h-screen flex max-md:flex-col`}>
    <StoreProvider>
      <Nav />
      <div className="root_content w-full h-screen">
        {children}
      </div>
    </StoreProvider>
  </body>
</html>

There are two divs in a flex wrapper. First one is supposed to contain a long multiline text, so I use overflow-y-auto to add vertical scroll when needed. This block should take all space left after placing second div.

The problem is that when resizing the window, first block begins to shrink freely only after bottom edge of the window meets it's border. Also, it shrinks a little bit if it has free space between bottom border and text including it's padding.

Perhaps you can better understand my problem by watching this GIF.

I tried using flex-shrink and flex-grow but neither solved this problem. I also tried doing like in the answer for this question, but it stops shrinking at all.

The thing I want to achieve is to make first (large) div shrink and become scrollable when there is not enough space for other children left inside the flexbox. How can I do this? If possible, I would like to do it with Tailwind, but using standard CSS is not a problem. I would also like to know why this is happening even though first div has h-full.

Any advice is appreciated.

Solution

Consider applying min-height: 0 to the .wrapper to override its default min-height: min-content so that it can shrink properly:

<html lang="en">
  <script src="https://cdn.tailwindcss.com/3.4.1"></script>

  <body class="w-screen h-screen flex max-md:flex-col">
    <Nav>Nav</Nav>
    <div class="root_content w-full h-screen">
      <main class="flex flex-col w-full h-full">
        <div class="flex justify-between align-middle items-center h-header w-full border-b border-gray-500">
          <span class="font-bold text-2xl">Display</span>
          <CreateEditModalCallerButton class="flex items-center justify-center p-2 hover:bg-opacity-15 hover:bg-black" mode="CREATE">
            <img class="mr-2 w-6 h-6" src="https://picsum.photos/24/24" alt="pic" width="16" height="16" />
            <span class="min-md:text-sm max-md:text-base">Add</span>
          </CreateEditModalCallerButton>
        </div>
        <div class="grid grid-rows-1 grid-cols-2 w-full h-full divide-x-2 divide-gray-600 px-7">
          <div class="flex flex-col w-full h-full max-sm:col-span-2 pr-7">
            <HometaskList initialData="{initialHometasks}">HometaskList</HometaskList>
          </div>
          <div class="flex flex-col w-full h-full pl-7 max-sm:hidden">
            <div class="wrapper w-full h-full flex flex-col justify-between my-7 min-h-0">
              <div class="w-full h-full min-h-0 outline-dotted outline-green-300 outline-2 p-7 bg-black overflow-y-auto whitespace-break-spaces text-nowrap">Lorem
ipsum
dolor
sit
amet
consectetur
adipiscing
elit
Etiam
placerat
erat
finibus
convallis
imperdiet
Mauris
elementum
euismod
dolor
ut
hendrerit</div>
              <div class="w-full h-16 mt-5 outline-dotted outline-green-300 outline-2 p-3 bg-black flex justify-between items-center">
                <span class="text-lg font-bold">From: <span class="bg-gray-900 p-1">01/01/2024</span></span>
                <span class="text-lg font-bold">Due: <span class="bg-gray-900 p-1">05/02/2024</span></span>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

  </body>
</html>