Прокрутка нужна контенту и сайдбарую.
<body>
<div id="app">
<nav id="nav">nav</nav>
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в
электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами
Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus
PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в
электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами
Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus
PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</div>
</div>
</div>
</body>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0;
}
html, body {
overflow-y: hidden;
}
html, body, #app {
height: 100%;
width: 100%;
}
#nav {
width: 100%;
height: 10%;
min-height: 70px;
}
#wrapper {
width: 100%;
height: 90%;
min-height: 500px;
display: flex;
}
#sidebar {
width: 25%;
height: 100%;
background-color: #5b1616;
}
#content {
width: 75%;
height: 100%;
background-color: black;
}
Простой
