Streaming live at 10am (PST)

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

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

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

Hi jorn

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

1 Like

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.
06

Good luck!

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