Как зафиксировать высоту контейнеров при использования flex?

Question

[bad_shape_guy]

Пытаюсь сверстать следующий макет:


Здесь можно вживую посмотреть: https://codepen.io/bad-shape-guy/pen/PodYZJZ

Пока пытался сверстать столкнулся с несколькими проблемами, сначала думал проблема будет в fixed (т.е. нужно верхний хэддер и боковые сайдбары зафиксировать, по аналогии position: fixed).

Однако уже смутило поведение header-wrapper, main-inner-one, main-inner-three.
Вроде задал им высоту жестко, но стоит начать уменьшать высоту страницы, как они начали сжиматься,
Хотя я ожидал, что контейнер с контентом будет до последнего уменьшаться, а они никогда.
В чём ошибка?

Comments

[Ankhena]

вроде задал им высоту жестко, но стоит начать уменьшать высоту страницы, как они начали сжиматься

Ну да, жестко. Одному 80px, другому 100%. И как они могут не сжиматься?

[bad_shape_guy]

Ankhena, хм, 100% я указал их родителю main-wrapper-inner, а двум дочерним по 50px.

[Юрий Матрос]

bad_shape_guy, попробуй через min-height

[Ankhena]

bad_shape_guy, ну так они и не уменьшаются, пока позволяет контент в среднем блоке.
Юрий Матрос,

попробуй через min-height

Достаточно flex-shrink поставить в 0, раз уж автор всё равно использует это свойство.

Вообще такие сетки проще делать гридами и оберток меньше.

[Юрий Матрос]

Ankhena, Век живи, век учись)

[bad_shape_guy]

Ankhena, с гридами тоже ещё ни разу не работал, а они позволяют имитировать подобные свойству position: fixed? Я просто ни с тем ни с другим не работал, и тоже был вопрос что пробовать использовать grid или flexbox, но не до знаю всех их нюансов. Мне например ещё нужно будет чтобы в боковых сайдбарах внутри был скролл

[Ankhena]

bad_shape_guy, https://jsfiddle.net/Ankhena/n067dbg9/