Как сделать прокручивающийся контейнер?

Question

[Евгений Иванов]

Вот простейший код страницы.

<div class="page">
<div class="page__menu">
Меню
</div>
<div class="page__content">
Контент
</div>
</div>

CSS

.page {

    display: grid;
    grid-template-columns:  auto;
    grid-template-rows: 60px auto; /* auto- т.е. по контенту */
}

.page__menu {
    grid-area: 1 / 1 / 1 / 1;
}

.page__content {
    grid-area: 2 / 1 / 2 / 1;
}

Обычная страница со строкой меню в 60 пикселей и оставшееся место занимает контент (page__content).
page__content - auto т.е. его размер по контенту.
Нужно чтобы page__content занимал все оставшееся место на экране, но у него были прокрутки.


Допустимо и вложить в него другой div.
Например

<div class="page">
<div class="page__menu">
Меню
</div>
<div class="page__content">

<div class="page__content_scroll_div">
Контент
</div>

</div>
</div>

Самое главное тут размер (он не фиксирован - по ширине и высоте экрана).

Как сделать прокручивающийся контейнер?

Answer 1

[Евгений Иванов]

Сделал так, вроде работает.

.page {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns:  auto;
    grid-template-rows: 60px auto;
}

.page__menu {
    grid-area: 1 / 1 / 1 / 1;
}

.page__content {
    grid-area: 2 / 1 / 2 / 1;
    overflow: auto;
}