I have page with Tailwind.
Code is here:

<div id="parent" class="flex h-screen flex-col bg-red-600">
  <div id="child1" class="flex h-20 items-center justify-center bg-green-600"><h3>Header</h3></div>
  <div id="child2" class="flex h-full flex-row">
    <div id="child22" class="scroll-y-auto h-full w-full overflow-y-auto bg-blue-600">
      <div id='itemsContainer'>
        <div id="child221" class="h-96 w-full bg-yellow-200">child221</div>
        <div id="child222" class="h-96 w-full bg-yellow-300">child222</div>
        <div id="child223" class="h-96 w-full bg-yellow-400">child223</div>
        <div id="child224" class="h-96 w-full bg-yellow-500">child224</div>
      </div>
    </div>
  </div>
  <div id="child3" class="flex h-20 w-full items-center justify-center bg-green-400"><h3>Footer</h3></div>
</div>

Tailwind playground: https://play.tailwindcss.com/DjQyUBZ5iA

Problem is, if element with id itemsContainer include some elements, element with id child22 is bigger like browser screen and hight in others elements is broken. If is empty everithing looks fine.

Exist some way how to fix it?

I read Tailwind docs, search on google, redesin my page, but nothing hepls.