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

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
htmlcss


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave Budah
Solution 2 Sheng Huang

Related Questions