Как выровнять блок вертикально внутри блока с flex: 1?

Question

[FLighter]

Доброго времени суток!
Есть такой шаблон: фиксированный/резиновый header/footer, между ними на всю оставшуюся часть главный блок, в котором находится блок с неизвестной шириной и высотой. Блок должен быть по центру по горизонтали и по вертикали. Проблема возникла в том, что если уменьшать высоту страницы, то внутренний блок выходит за главный блок, хотя скроллбар появился и по идее проблемы не должно быть.
Как можно решить это, чтобы при уменьшении был скроллбар, но внутренний блок был внутри главного на всю свою высоту?

В примере ниже видно, что текста "content" не видно

Answer 1

[Smeecy Smeecy]

Задайте высоту блока в процентах...

Comments

[FLighter]

Какого из? Если внутреннему задать, то контент внутри будет уходить

[Smeecy Smeecy]

FLighter, content, я так понял, вам нужно чтобы надпись контент была всегда видна и не пряталась под header

[FLighter]

Smeecy Smeecy, верно. Но если контента внутри блока много, он уйдет уже за футер

[Smeecy Smeecy]

FLighter, высоту просто медиазапросами подправить ещё можно.

Answer 2

[Сергей Жубартович]

html,
body {
  min-height: 100%;
}

Может быть это вам подойдет