Why isn't the 100% height working here:

Hello there!

in the second section, there’s a container with a flex box and two children.

The section has a height of 100vh, and first I had my container (a div named container) with a height of 100% and applied flex box to it, however that didn’t change the height of the content.

So I created a div inside the container, removed the flex and height from the container and applied them to the div, since the div (named flex box) is child of the of the container: the 100% won’t work. So I used 100vh, the same height as the section.

If I applied the 100vh to the container without using the flex box div, I would also get the same results. But I want to know why the 100% doesn’t work in this case?

Weirdly phrased question, sorry about that.

Link: Webflow - Cuisine Wave

Your top and bottom padding for that second section is at 36% did you want that?

1 Like

36%? Did you mean 36 px?

Yes it’s 36 px, would that cause the 100% problem? Because if it did, the child with 100% would lose only 36px from top/bottom, but in this case the element only lost 36 from top while the bottom had a larger white space than 36

The 2nd Section has 36px top/bottom padding, so the child boxes inside that will start after the 36px padding. The child boxes are 100% but will not reach the top and bottom with the padding. Take that padding off and it will be fully 100%.

1 Like

thanks for the reply, but yeah this is how it’s supposed to work however it doesn’t work like that (for some reason)

only the top will be 36 white space (due to padding) but the bottom white space is (36 padding) + more white space from the element itself, for some reason the 100% property is not causing the flex element to lengthen the children fully, so the bottom has a lot of space du to padding + unfulfilled element height

It works for me when I take it off. No white space. But if itʻs not doing it for you then you might have a bigger issue. Sorry I couldnʻt be more help!

1 Like

your flex doesn’t go full height because it has Justify center. The container will do what the child inside, tells it to do

Two ways to fix this depending on the look you want:

  1. use justify space between or space around
  2. add top and bottom margins AUTO to child flex

if I missed something in your question, let me know

1 Like

No, thank you very much for the help! It gave me some ideas

Oh I see, never realized Justify center does that. Thank you very much!

1 Like

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