Отображать полосы прокрутки и использовать их из дочернего элемента гибкого поля. ⇐ CSS

[Anonymous]

Панель навигации сейчас маленькая, но она немного увеличится. Итак, ему понадобятся полосы прокрутки. Однако, похоже, я не могу заставить их появиться, не заставляя их переполняться: прокрутите; Но даже это не работает, поскольку полосы прокрутки не работают.
Я пробовал добавлять переполнение: скрытое, обрезание, отсутствие деформации к различным классам вместе с переполнением: прокрутите до различные родительские элементы.
DOM был создан из приложения blazor, в котором были извлечены соответствующие элементы и стили. Результат показывает мою проблему. Я добавил границы, чтобы убедиться, что различные элементы занимают всю область просмотра.
ОБНОВЛЕНО С ОТВЕТОМ: см. комментарий CSS «Здесь происходит волшебство».
Чтобы Чтобы полоса прокрутки отображалась так, как ожидалось, должна быть какая-то высота, которая фиксирует длину панели навигации.

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

body {
padding: 0;
margin: 0;
font: bold 16px Garamond, serif;
background: black;
color: white;
min-height: 100vh;
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}

.view {
flex: 1 1 100%;
border: solid 1px red;
}

.navbar {
flex: 0 0;
border: solid 1px yellow;
align-content: start;
}
nav {
white-space: nowrap;
padding: 0;
color: grey;
/* magic happens here */
height: 100%;
overflow: auto;
/* magic happens here */
}

ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
overflow: auto;
}

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

[list]
[*]Home Sweet Home
[*]Adventure Log
[*]Rules
[*]Maps
[*]Characters
[/list]


Hello, world!
Welcome to your new app.



 

Подробнее здесь: https://stackoverflow.com/questions/787 ... child-item