Пусть у нас имеется следующая разметка:
<div class="wrapper">
<ul class="nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<div class="main-content">
<!-- контент -->
</div>
</div>
На самом деле это не заслуга flex. Основная идея в том, чтобы вынести правую колонку из общего потока документа, т.е. задать ей свойство position: absolute
или position: fixed
, а также добавить свойство overflow
. Делаем.
/* сбрасываем стили */
html, body, .wrapper {
height: 100%;
}
.wrapper {
display: flex;
}
.nav {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-content {
position: absolute;
width: 100%;
height: 100%;
overflow-y: auto;
}
Грубо говоря, свойство overflow-y: auto
обрезает ту часть контента, которая выходит за область сверху или снизу от блока, добавляя при этом полосу прокрутки только для этого блока.