Streaming live at 10am (PST)

Complex flexbox problem (how to vertically align)


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:

The idea is to get the buttons to line up on the same row.

Here is my site Read-Only:

Thanks a lot for your help!

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.

You can read more about display: contents bellow:

and see it’s support table bellow:

How about a little JQuery to the rescue?

1 Like