So i have this layout: https://stackblitz.com/edit/ya6vrj-qtzort?file=src%2Fapp%2Fcarousel-basic-demo.html
<div class="flex flex-column border-1"><div class="flex justify-content-center border-1">My Title</div><div class="flex flex-row border-1"><div class="flex flex-column border-1 text-3xl p-2"><div>info 1</div><div>info 1</div><div>info 1</div></div><div class="flex flex-column border-1 flex-grow-1"><div class="flex justify-content-center border-1">DEMO</div><div class="flex justify-content-center align-content-center text-7xl"> BIG TEXT</div></div><div class="flex flex-column border-1 text-3xl p-2"><div>info 1</div><div>info 1</div><div>info 1</div><div>info 1</div><div>info 1</div></div></div><div class="flex flex-row"><div class="flex flex-column flex-grow-1 border-1"><div>info 1</div><div>info 1</div></div><div class="flex flex-column flex-grow-1"><div>info 1</div><div>info 1</div></div></div></div>And i am wondering if it is possible to set a limit on how much the fley layout will grow vertically the container/box on the right and left like this:
Basically the boxes on left and right should be as high as the middle box with the big text. The middle box should dictate the height of the whole middle row. The other two containers should display a scroll bar and be overflow:hidden.
I just can't get it to work, all examples or "solutions" i find require to set a fixed height on the left & right containers. I am at the point where i will do that using javascript to seht height to the height of the middle box. But it just feels wrong..
So has anybody a solution for this?
i am using PrimeFlex here but since its just a wrapper around flexbox it should be no problem.