Как правильно сверстать полноэкранную страницу?

Есть задача: сверстать страницу, чтобы она была высотой 100vh, при нехватке высоты должен появляться скролл.
Попытался сделать так: (смотреть лучше на codepen)

Всё хорошо, но при уменьшении высоты окна фон съезжает. Происходит это из-за свойства .main-page {height: 1px;}, но если его убрать, то не работает height: 100% и блок не получается полноэкранным + фоновые линии тоже занимают не всю высоту. Как правильнее решить эту задачу?