Complex CSS - Adaptive max height with overflow-auto - css

Question

Considering the requirements:
No JS or anything but CSS
"max-height" either on the father (white box) or the blue box won't work because the yellow one will change its height accordingly with its contents
both boxes will be changing their contents but I want the yellow box to be the height anchor
I need to make the blue box the same height as the yellow one, the yellow one will be changing its height frequently, and the blue one needs to follow the height and add scrollbar when needed
<div class="flex min-h-screen items-center justify-center bg-slate-200">
<div class="flex w-full max-w-xl items-start gap-4 bg-white p-4">
<div class="flex flex-grow flex-col gap-2 overflow-auto bg-sky-400 p-4">
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
</div>
<div class="flex flex-col gap-4 bg-yellow-500 p-4">
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
</div>
</div>
</div>
result image
Obs:
I'm using https://play.tailwindcss.com/ to keep it simple
If there's no solution I will manage to use the "max-height" property, that's why you don't need to waste your time doing any logic to fix this, I just wanna know if it's possible with css only

Answer 1

Assuming we're allowed to add an extra div, you can wrap the first flex child (the blue one), and add basis-0, and grow to it, like this:
<div class="flex min-h-screen items-center justify-center bg-slate-200">
<div class="flex w-full max-w-xl gap-4 bg-white p-4">
<div class="flex flex-grow flex-col">
<div class="flex grow basis-0 flex-col gap-2 overflow-auto bg-sky-400 p-4">
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
</div>
</div>
<div class="flex flex-col gap-4 bg-yellow-500 p-4">
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
<div class="bg-black/40 p-4"></div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
You can try to change the height of the yellow box to see the effects.