Как сделать правильный Holy Grail Layout с прокруткой на Flexbox?

Question

[softshape]

Есть разные варианты верстки "навигация + контент + футер" на flex'ах, например - https://gridlayout.io/demos/holy-grail.html Я никак не могу заставить их работать в ситуации, когда контента не одна строка, а много и в должна появляться вертикальная прокрутка. Вместо этого весь лейаут просто уходит вниз по высоте, а прокрутка не появляется.

Что нужно поменять, чтобы не меняла свою высоту, а уходила в скроллинг если нужно?

Answer 1

[softshape]

main {
   flex: 2;
   overflow: auto;
}

Answer 2

[Odisseya]

Зафиксировать высоту и разрешить скролл:

main {
    height: 100vh;
    overflow-y: auto;
}

Comments

[softshape]

Это очень плохое и крайне не универсальное решение. Мне нужно его заставить работать, в том числе, в модальном окне неизвестного заранее размера. Зачем тогда мучаться с flexbox?

[Odisseya]

Немного помогают относительные единицы, но фиксированная высота сама по себе "крайне не универсальное решение".