Прокрутка только боковой панели в флекс контента

Question

У меня есть оболочка , которая содержит два div .Я хочу, чтобы содержимое было исправлено, чтобы его нельзя было прокручивать.Боковая панель содержит список имен пользователей, поэтому она имеет большой контент с помощью прокрутки y .

Я пробовал много вещей, таких как добавление display: auto; , но этопродолжает прокручивать всю страницу.

Вот как выглядит мой HTML-файл.

<div class="wrapper">

    <!-- Sidebar  -->
    <div id="sidebar">
        <div class="sidebar-header"></div>

        <div class="sidebar-filter"></div>

        <ul class="list-unstyled components"></ul>
    </div>

    <!-- Page Content  -->
    <div id="content">
        CONTENT
    </div>

</div>

А вот и файл CSS.

.wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

Хотя это выглядит очень просто,но я застрял в этой проблеме на 2 дня.

Answer 1

Используйте overflow-y: scroll; и установите фиксированное значение height (например: height: 120px;) на #sidebar

РЕДАКТИРОВАТЬ!

чтобы вы прокомментировали

Я хочу, чтобы боковая панель была в полный рост,

используйте height:100vh

.wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
        overflow-y: scroll;
            height: 100vh;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

<div class="wrapper">

    <!-- Sidebar  -->
    <div id="sidebar">
        <div class="sidebar-header"></div>

        <div class="sidebar-filter"></div>

        <ul class="list-unstyled components">
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        </ul>
    </div>

    <!-- Page Content  -->
    <div id="content">
        CONTENT
    </div>

</div>