I’m struggling to figure this one out and maybe it needs some JS to make it work. So I have a layout of cards in a flex container, and I want to make card-blue and card-red divs reflect the maximum height of the same divs on the same row. The cards have height set to 100% to fill the whole vertical space. Hard to explain so here’s a picture to demonstrate it properly:
That’s not possible without setting heightor min-height.
You can do this if you put the card-blue in a row and card-red on another, but that would mean you wouldn’t be able to contain both of the within a single element.
That’s not even possible to reproduce using Grid Layout by itself. In order to do that you’ll need display: grid combined with display: contents, but it has very limited support right now. So your best bet is to stick with min-height.
