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?
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%.
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!
