Streaming live at 10am (PST)

Flex equal columns not working


#1

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.



#2

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.


#3

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


#4

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