Css flex макет header main footer

У меня никак не выходит сверстать такой макет. Нужно, чтобы:

Шапка была всегда вверху
Main занимал максимум свободного пространства, а если что-то не помещается, то появлялся бы скролл
Footer должен быть внизу экрана и всегда быть виден. Это поле ввода текста, если что. Футера на странице может и не быть.
Это всё находится в контейнере height: screen

Я верстаю на флексах и всё время упираюсь в то, что flex-grow, shrink, как я понял, не работают с height: screen.

Автор решения: Юрий Копоть

Если нужно чтобы скролл был непосредственно на Main (там где контнет), то используйте flex. Для wrapper/body задайте высоты 100vh, для шапки и подвала высоту, а для main используйте свободную ширину. Примерно так: https://codepen.io/jurij-kopot/pen/PoEdOzr
Если скролл нужен на всю страницу (чтобы он был и на шапке и на футере), но скролился только контент, можно попробовать прибить шапку и подвал, через position: fixed. Примерно так: https://codepen.io/jurij-kopot/pen/dyJqZpg

→ Ссылка