Search code examples
htmlcsssassflexbox

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 enter image description here

here's my code :

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

  • 2024 Update:

    I stumbled upon this randomly going through my profile, and I would actually NOW recommend using dvh instead of vh. Specifically with mobile browser chins and forehead UI, they don't count vh but counts dvh, so I would now do the following:

    body {
  min-height: 100dvh; 
}

    you can check the browser support for it, its good for most people I would say, but < 90% might be worry-some for others. https://caniuse.com/mdn-api_css_dvh_static

    Previous Answer:

    I believe I understand what you're saying,

    (If this is completely wrong let me know an I'll update it!)

    you need to add a height to the body, perhaps a min-height would help

    body {
  min-height: 100vh; 
}

    this sets the height to be ATLEAST the the height of the viewport.

    Take a look, https://codepen.io/looskie-the-flexboxer/pen/abqjOge