Scroll only sidebar in flex content

Question

I have a wrapper which contains two divs. I want the content to be fixed, so not scrollable. The sidebar contains a list of usernames, so it has a big content through y scroll.

I have tried many stuff, like adding display: auto; but it keeps scrolling the whole page.

Here's how my HTML file looks like.

<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>

And here's the CSS file.

.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;
}

Although it looks very easy, but I am stuck in this problem for 2 days.

Answer 1

Use overflow-y: scroll; and set fixed height(for example: height: 120px;) to #sidebar

EDIT!

to you comment

I want the sidebar to be in full height,

use 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>