flex box and javascript

This may seem like a beginner's concern, i have doubts in setting a div to be the size of a whole page or window. The way i go about this is to set the main div to absolute with height and width of 100vh and 100vw and set the inner div to position relative. which i found was incorrect to set a fixed size. so i searched and found that i have to set the body element to min-height:100vh and width to 100% and set main div to width and height of 100%. As a result, the body element became the size of the window size but the main div did not. you could see an example of this in my css code. I would really appreciate if anyone can explain this to me. Also what could be a good practice to go about this. Thanks:)