Can't set full height for flexbox child , any help would be appretiated HTML CSS SASS Web Design

I'm trying to create a movies app with similar layout to that of youtube, I used the body as a flex parent and (nav and main) as flex children, I already went through some similar questions in Stackoverflow however none of them solved my problem

an image of the result

here's my code :

```https://codepen.io/userahmad2001/pen/poaKXBz```