Flexbox Equal Height?

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)

(how to share your site Read-Only link)

Hi David,
Can I get an editable copy of you project?
Here’s what I’m thinking:

  • check the max width of your box
  • if you are on a CMS plan, you can always control the length of the text & title
  • otherwise, you’ll have to cut the text manually

I am also looking for the answer as well.

I found this guide from Webflow University helpful Equal height layouts with flexbox

1 Like

Cheers Marcel, that’s what I originally followed but I’m not getting the desired effect :frowning:

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.

1 Like

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.

Any idea how I delete the space after the £ and price?