Макет боковой панели CSS – ограничение высоты с помощью прокрутки ⇐ Html

[Anonymous]

Я создал базовый макет сетки CSS, но столкнулся с проблемой. Боковая секция продолжает расти по мере добавления новых элементов дерева. Вместо этого я хочу ограничить его высоту, чтобы оно не превышало основное содержимое, и включить прокрутку, когда она достигнет этого предела.
Этот макет я использую в нескольких проектах и ищу лучший и простой способ добиться этого.
Подойдет ли CSS Grid или есть лучшая альтернатива?
https://codepen.io/intzi1992/pen/GgKVRyV

Код: Выделить всё

.grid {
display: grid;
grid-template-columns: 20rem 1fr;
grid-template-rows: 4rem 1fr 3rem;
height: 100vh;
width: 100vw;
background-color: bisque;
}

nav {
grid-column: 1/3;
grid-row: 1/1;
background-color: aliceblue;
align-self: center;
display: flex;
justify-content: space-between;
align-items: center;
}

aside {
grid-column: 1/2;
grid-row: 2/3;
background-color: aquamarine;
}

main {
grid-column: 2/3;
grid-row: 2/3;
background-color: chocolate;
}

footer {
grid-column: 1/3;
grid-row: 3/3;
text-align: center;
align-content: center;
}

.tree-item {
padding: 1rem;
background-color: blueviolet;
margin-bottom: 0.125rem;
text-align: center;
overflow-y: scroll;
}

Код: Выделить всё

A


Copyright ©

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/794 ... ith-scroll