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

[Anonymous]

Я создал базовую сетку CSS сетки, но я сталкиваюсь с проблемой. В стороне от участия становится все выше, так как добавляются новые элементы дерева. Вместо этого я хочу ограничить его высоту, чтобы он не превышал основной контент и обеспечивала прокрутку, когда он достигает этого ограничения. < /P>
Этот макет - то, что я использую в нескольких проектах, и я m Ищу лучший и самый простой способ достичь этого. < /p>
будет ли CSS Grid правильным подходом, или есть лучшая альтернатива? < /p>
https : //codepen.io/intzi1992/pen/ggkvryv





A


Copyright ©


< /code>
.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;
}
< /code>
Thanks!


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