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