Streaming live at 10am (PST)

Flex equal columns not working

I’m trying to make a layout with equal height columns using flex. It all works as intended in the editor; the columns adjust their height to be equal but it doesn’t work when previewing or publishing as shown on the attached images.
I’m afraid that I can’t share a read only link publicly.

Hi @Mowgli,

Since it’s hard to understand the exact problem in your case without inspecting the website, I can only give you some advices:

  • make sure to inspect how the Equal-height example is constructed on our Flexbox website and watch the tutorial video.
  • what might be the problem: flex items are stretched to be of equal height by their direct flex parent with Align: Stretch setting. If you’re using nested wrappers inside the stretched flex items, those won’t be stretched, since their direct parent is a Display: Block element. So in that case setting the nested wrapper to Display: Flex can fix your problem.

Hope this helps.

Hi, thanks for you reply. I’ve figured it out, there was an interaction setting my flex boxes to inline block

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.