CSS 100vh смещение по заголовку

Вот эта ручка у меня: https://codepen.io/anon/pen/wPdrod

Как видите (по крайней мере, в Chrome и Firefox), есть две вертикальные полосы прокрутки. Должен быть только внутренний, так как заголовок должен оставаться статичным.

CSS, вызывающий это:

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

Особенно высота 100вх. Это приводит к тому, что область просмотра становится слишком высокой на 36 пикселей. Какая высота заголовка. Если я сделаю:

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

Тогда он отлично работает. Я пытаюсь понять, зачем мне вообще это нужно. Что в этом макете заставляет 100vh учитывать высоту заголовка? Я чувствую, что мне не нужно делать это вычисление, поскольку заголовок находится внутри div макета вместе с остальными элементами.