Streaming live at 10am (PST)

Complex flexbox problem (how to vertically align)

Hello!

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: https://preview.webflow.com/preview/flexbox-challenge?utm_source=flexbox-challenge&preview=5dec1aa96b941b5b929862c84eaf56e6

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:
https://caniuse.com/#search=display%3A%20contents

How about a little JQuery to the rescue?

1 Like