Hi, I’m trying to set an equal height on my flex boxes containing product info and it doesn’t seem to want to play? Any ideas why?
Here’s an example of one of the pages: Desktop PCs
I basically want the bottom green section (eg. IN STOCK) to all line up!
Cheers
David Lewis
Here is my site Read-Only: (https://preview.webflow.com/preview/recommerceit?utm_medium=preview_link&utm_source=designer&utm_content=recommerceit&preview=823054585a1510813e31936089a862d7&workflow=preview)
Hi David,
Can I get an editable copy of you project?
Here’s what I’m thinking:
I am also looking for the answer as well.
I found this guide from Webflow University helpful Equal height layouts with flexbox
Cheers Marcel, that’s what I originally followed but I’m not getting the desired effect 
Hi Martin, let me check your suggestion, if no success I’ll send you an editable copy. regards David
@1960creative @Sunlight_Studios
This should be the solution that you are looking for, please check here
I just worked out a very basic layout, so don’t go for the design.
https://preview.webflow.com/preview/abirana?utm_medium=preview_link&utm_source=designer&utm_content=abirana&preview=abe5f6160428f4d149c74ceab76a201b&pageId=62da61c36e138f1ccc315798&workflow=preview
The trick is to apply display: flex with direction: vertical to those items, and with 100% height. And for the bottom element you just have to apply top margin: auto
(Best to wrap in a DIV so that you can add more elements if you want.)
You can do similar with Grid layout as well, styles will also be very similar.
Cheers Abi, that’s a great help. Will give it a go and hopefully that will crack-it.
Sure let me know if there will be anything.
