CSS 100vh offset by header

I have this pen here: https://codepen.io/anon/pen/wPdrod

As you can see (at least in Chrome and Firefox), there are 2 vertical scroll bars. There should only be the inner one, as the header should remain static.

The CSS causing this is:

#app{    display: flex;    flex-direction: column;    box-sizing: border-box;    height: 100vh;}

Particularly the 100vh height. This is causing the viewport to be too tall by 36px. Which is the header height. If I do:

#app{    ...    height: calc(100vh - 36px);}

Then it works perfectly fine. I'm trying to figure out why I need to do this in the first place. What about this layout is causing the 100vh to account for the header height? I feel like I shouldn't have to do that calc as the header is within the layout div along with the rest of the elements.