Mayout React / CSS: сделайте прокрутку боковой панели ⇐ CSS

[Anonymous]

Я совершенно новичок в разработке веб -приложений (только хобби). У меня есть следующий макет, основанный на Flexbox: < /p>

Строка заголовка < /li>
Основная часть, состоящая из основной дивизионной и боковой панели < /li>
Строка нижней части < /li>
< /ul>
, когда экран достаточно широко (> 600px), на стороне. Содержание должно быть прокручиваемым, так что весь макет подходит для просмотра. Как это получить? Мне, вероятно, нужно как-то исправить высоту и добавить переполнение y: Auto . Но как исправить высоту боковой панели, как приложение всегда подходит для просмотра?

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

PAGE TITLE

..info..



MAIN CONTENT

side row 1

side row 2

side row 3

side row 4

...

side row 33


Footer Row Here

< /code>
и файл CSS: < /p>
html,
body {
background: #fff;
padding: 0;
margin: 0;
}

#app_container {
display: flex;
flex-direction: column;
height: 100vh;
}

#headerRow {
border-bottom-style: solid;
border-bottom-width: 1px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

#headerTitleDiv {
flex: 1 1 auto;
text-align: center;
}

#headerInfoDiv {
flex: 0 0 auto;
margin: 8;
}

#mainRow {
flex: 1 0 300px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

#reactflowDiv {
flex: 3 0 300px;
min-height: 500px;
}

#sidebarDiv {
min-width: 300px;
}

@media only screen and (max-width: 601px) {
#reactflowDiv {
border-bottom-style: solid;
border-bottom-width: 1px;
}
#sidebarDiv {
flex: 1 0 auto;
}
}

@media only screen and (min-width: 602px) {
#reactflowDiv {
border-right-style: solid;
border-right-width: 1px;
}
#sidebarDiv {
flex: 0 0 300px;
}
}

#footerRow {
border-top-style: solid;
border-top-width: 1px;
}

На маленьком экране боковая панель должна быть нанизу, это работает в основном.>

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