Search code examples
htmlcsslayoutstyling

The navbar with the content - how to keep the 100vh size?

Below is a reproduction of the issue which I am struggling with.

Demo: https://jsfiddle.net/5n4Lhgbt/

As you can see the section div is a little higher than the 100vh (the height of the navbar has been added & the scrollbar occurs). I want to avoid it. The situation which I am talking about is clearly shown in the image below:

enter image description here

A few pieces of information:

  • the height of the navbar is dynamic - it could be higher, depends on the logo inside,
  • using the overflow: hidden on the section container doesn't satisfy me,

I appreciate any help.

Solution

  • You just need to add to your #section :

      flex: 1;
  overflow: auto;

    and that would make the trick: JSFIDDLE