What is another way to make the last div to extending to the max he can-CodePudding

In order to make the last div extend according to the height of the viewport, I used:

body {
display: flex
}

."main-container"{     <---- the last div
flex:1                
}

Is there other way getting this result without using flexbox?

Here is my codepen:

https://codepen.io/hadassf/pen/rNJNBpB?editors=1100&fbclid=IwAR3a_hbrJPoeRWnseZlpkv2aBVOS9H1PxTpRqAK24jVper3wjrd5qXQlRpM

CodePudding user response：

I think since its the main container you give it a height of 100% i.e .main-container{ height: 100%;}, because the display:flex is just for telling your parent element (in this case your .main-container), how you want it's child elements to be distributed within it. I hope I got your question correct.

CodePudding user response：

vh is for viewport height, you can give 100vh if you want to size within viewport height.