Bootstrap - Flex Box Container With Scrollable Content

user_1033686 0
Viewed 1228

I am trying to build a fairly standard application layout with Bootstrap 5 and flexbox, consisting of a top bar, bottom bar and an auto-sized content area. The content area is split into a side bar and a main content area.

For reference I want it to look something like VSCode.

enter image description here

With some tags omitted for brevity, here is what I have so far:

<!doctype html>
<html class="h-100 mh-100" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <style>
        .sidebar {
            background: red;
            flex: 0 0 25%;
        }

        .main {
            background: blue;
        }
    </style>
</head>

<body class="h-100 mh-100">
    <div class="h-100 mh-100 d-flex flex-column">
        <div class="bg-dark text-white p-1">
            <span>Top Bar</span>
        </div>
        <div class="flex-fill d-flex flex-row">
            <aside class="sidebar d-flex flex-column">
                <div class="bg-dark text-white p-1">
                    <span>Side Title Bar</span>
                </div>
                <div class="sidebar-content overflow-scroll">
                    <div style="height: 0; background: magenta;"></div>
                </div>
            </aside>
            <main class="main flex-fill">
            </main>
        </div>
        <div class="bg-primary text-white p-1">
            <span>Bottom Bar</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
        crossorigin="anonymous"></script>
</body>

</html>

What I want is for the sidebar content to scroll when it exceeds the available space in the viewport, but for example if you increase the height of the content div in the sidebar the whole lot scrolls together, and pushes the bottom bar out of view.

How do I keep all panels in view (top, bottom, side and main), and allow individual panels to scroll when necessary, without pushing the content out of view?

bootstrap-5 flexbox twitter-bootstrap css html
1 Answers

Use the flex-* and overflow-* classes. Also, it's easier to set the height using vh-100 so that you don't need to set h-100 on html, body, container, etc...

<div class="vh-100 d-flex flex-column overflow-hidden">
    <div class="flex-shrink-1 bg-dark text-white p-1">
        <span>Top Bar</span>
    </div>
    <div class="flex-fill d-flex flex-row overflow-auto">
        <aside class="sidebar d-flex flex-column">
            <div class="bg-dark text-white p-1">
                <span>Side Title Bar</span>
            </div>
            <div class="sidebar-content p-2 overflow-auto">
                
            </div>
        </aside>
        <main class="main flex-fill p-3 overflow-auto">
            
        </main>
    </div>
    <div class="flex-shrink-1 bg-primary text-white p-1">
        <span>Bottom Bar</span>
    </div>
</div>

Codeply

Related: How to implement responsive, independently scrolling panes in Bootstrap?

user_1714560
Related