Prevent Main Page Content From Going Beneath Navbar On Smaller Screens

I have a short vertical navbar which sits to the left of my content. It is collapsible (so it has a variable width).

When the webpage is small, the main page content drops below the navbar. I don't want this to happen. If the content is too wide for the small screen, I simply want the main page content to remain next to the navbar and for a scrollbar to appear.

I have tried setting the navbar's height to 100% and to 100vh but the content still drops beneath it (the only difference is that with one of these height set, there is a lot of white space between the navbar and main page content).

Thank you.

<div class="row" id="body-row">

    <!-- left nav bar -->
    <div id="sidebar-container" class="sidebar-expanded">
        <ul class="list-group">
            [...]
        </ul>
    </div>

    <!-- main page content -->
    <div class="flex-grow-1 main_container">
        <div class='content-block'>
            [...]
        </div>
    </div>

</div>

#sidebar-container {
    padding: 0;
    margin-top: -2.9em;
    border-radius: 10px;
    height: 100vh;
}

.main_container {
    margin: 1em;
}

.content-block {
    padding-bottom: 7em;
}

from Recent Questions - Stack Overflow https://ift.tt/3fFCHrM
https://ift.tt/eA8V8J