Flex layout not working properly

On my webpage [www.yogoro.me], flex layout was working perfectly.
These days I visited my own website and noticed that, with no adjustment/change from my side, flex alyout was not working properly anymore.
The problem:
Inside a box [here called parent-box] I have:

1] a heading
2] a hidden box
3] a link box

At this parent-box, with minimun height of 300px, ‘flex layout, direction-column, justify-space-between’ the last item [3] used to be at the bottom.
Now there is a considerable space between the bottom of this parent-box and the last item.

For now, I took out the minimum height as a quick fix.
The parent-box is smaller, but has no unintended space between its last item and its bottom.

Please, could someone help me with this issue


Here is my public share link: https://preview.webflow.com/preview/max-yogoro?preview=c47df470802f56554402915123848fd8

So many containers max! I cleaned it up a bit and placed your two “box” divs inside your container and gave them a 48% width. Changed the display setting of the container to flex box and laid it out to justify spacing between the boxes. Also did some editing of the individual boxes so that they appear properly wether all elements inside of them are showing or not. Here are all the changes and how it can work for you:

Hi Joshalo3,

Thanks for your nice and quick reply.
Not sure if I did it right, but…
After completing your instructions, I realized that when one ‘hidden dropdown’ is opened [through the ‘arrow’], both boxes are expanded, instead of just the one which was clicked.
I also try to keep the ‘dropdown content’ closer to the box’s main title, not centered like in the right box of your screenshot.
For now, I’m still keeping the quick fix solution that I mentioned before.

Many thanks anyway, man


Definitely. You can too align the box so when the hidden element is visible you get the spacing you want. Happy building!

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