Content div height 100% and columns inside also at height 100%

[Helena]

Hello,

I wanted to ask a question that i have a long time ago.
I have a div container that has other divs inside it. (These are not row columns) I want these divs to always be the same height regardless of the content inside. I put the div container to 100% height and all the divs that are in there also at 100%. And what happens is that each of the divs has different sizes, depending on the amount of elements within each of them. If I specify an exact measure in px for the container div, everything works fine. However, I can’t specify an exact measure like 400px for example because I may have a lot of content in the divs that are inside and I run the risk that this content does not fit all there). How can I solve this? Why the system does not assume the 100% that I put? Do I have to enter some custom code to force it to have 100%?

Thanks

[jorn (Jörn)]

Hi
Have you looked at flexbox yet?
Here’s a quick demo I made for you:
http://equal-heights-with-flexbox.webflow.io/

Here’s the preview:
https://preview.webflow.com/preview/equal-heights-with-flexbox?preview=0bc1227de70aa2a157ec3fc2e11b5e87

And here’s the link to Webflow University about Flexbox

Flexbox | Webflow University

[Helena]

Hi jorn

Thank you so much! I’m new on this!
I will explore more!

[jorn (Jörn)]

Welcome, and we are many here to help you out.

Check my preview, but it is pretty simple.

A parent div is set to flex with align stretch and every child inside will stretch out to match the parent.

Good luck!