Streaming live at 10am (PST)

Complex flexbox problem (how to vertically align)

#1

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!

0 Likes

#2

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

0 Likes

#3

How about a little JQuery to the rescue?

1 Like