How to get scrollable tab content in bootstrap 4.1 using flex

Question

I have a very similar question as in this post except I want to use bootstrap's flex for a "dynamic" height of the tab-content. The following code produces a scrollbar for the whole page, but I want only the content inside the tab-pane being scrollable (inner scrollbar).

Edit I: tab-content should take the rest available space. I thought flex-grow-1 for tab-content in combination of h-100 for tab-pane would do that. But it does not.

Thanks for any advise.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-row" style="min-height: 100vh; max-height: 100vh;">
    <div class="d-flex flex-column flex-grow-1">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                   aria-controls="nav-home" aria-selected="true">Home</a>

            </div>
        </nav>
        <div class="tab-content flex-grow-1" id="nav-tabContent">
            <div class="tab-pane fade show active d-flex flex-column h-100" id="nav-home" role="tabpanel"
                 aria-labelledby="nav-home-tab">
                <div class="flex-grow-1" style="overflow-y: scroll">
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
                        farm-to-table
                        Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
                        cliche American
                        Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
                        Wayfarers codeply
                        PBR
                        selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
                        Pitchfork
                        fixie
                        iPhone fanny pack art party Portland.
                        Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free
                        Kickstarter
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Showrin Barua · Accepted Answer · 2019-07-12T07:42:47.297

Here's my solution. Add the following code in your css file. Hope it will be helpful to you. If you face further problem, feel free to inform.

.tab-content {
  height: 90vh;
}

It allows your tab content to take the rest of the area. Because your header is taking 10% height of the screen. That's why you have 90% left.

.tab-content {
  height: 90vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
            integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-row" style="min-height: 100vh; max-height: 100vh;">
    <div class="d-flex flex-column flex-grow-1">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                   aria-controls="nav-home" aria-selected="true">Home</a>

            </div>
        </nav>
        <div class="tab-content flex-grow-1" id="nav-tabContent">
            <div class="tab-pane fade show active d-flex flex-column h-100" id="nav-home" role="tabpanel"
                 aria-labelledby="nav-home-tab">
                <div class="flex-grow-1" style="overflow-y: scroll">
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
                        farm-to-table
                        Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
                        cliche American
                        Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
                        Wayfarers codeply
                        PBR
                        selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
                        Pitchfork
                        fixie
                        iPhone fanny pack art party Portland.
                        Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free
                        Kickstarter
                    </p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
                        farm-to-table
                        Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
                        cliche American
                        Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
                        Wayfarers codeply
                        PBR
                        selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
                        Pitchfork
                        fixie
                        iPhone fanny pack art party Portland.
                        Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free
                        Kickstarter
                    </p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan
                        farm-to-table
                        Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics,
                        cliche American
                        Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade.
                        Wayfarers codeply
                        PBR
                        selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO
                        Pitchfork
                        fixie
                        iPhone fanny pack art party Portland.
                        Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown
                        gluten-free
                        Kickstarter
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Your solution resolves the problem of the outer scrollbar, but I want tab-content to have the rest available space and in your solution tab-content (obviously) takes 50% of the screen height. Do you have any other suggestions? — binaryEcon, Jul 12 '19 at 07:30
I don't know why it works, but it works. I'm confused, because I tried it on a large screen (1307 px height). So 90vh should be 1176px, but tab-content has 1265px. It looks like kind of magic, but maybe it's a workaround for using bootstrap's tab-content in combination with flex for my needs. — binaryEcon, Jul 12 '19 at 08:14
May be. If it works then make the answer as accepted please. Ow, one more thing, please correct my name, it will be Barua. Actually it's my father's name. (-_-) @binaryEcon — Showrin Barua, Jul 12 '19 at 08:18
Sorry, I'can't edit my comment anymore. I know, I mentioned you, but I don't see it in the comment. Should I delete my comment? — binaryEcon, Jul 12 '19 at 08:30
It's ok @binaryEcon ... :) Amazingly now I can;t see that name in the comment. — Showrin Barua, Jul 12 '19 at 08:34

score 0 · Answer 2 · answered Jan 02 '23 at 22:49

I managed to do this for Bootstrap 5 using the question/example from here: how to scroll content of flex row that is flex-grow-1. Any long content in a tab pane creates a vertical scroll bar with the nav bar staying put.

This should work for Bootstrap 4 by replacing g-0 with no-gutters.

<body class="container-fluid p-0">
<div class="col d-flex flex-column vh-100 pb-3 px-3">

    <div class="row g-0">
        <ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-status-tab" data-bs-toggle="pill" data-bs-target="#pills-status" type="button" role="tab" aria-controls="pills-status" aria-selected="true">Status</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-flights-tab" data-bs-toggle="pill" data-bs-target="#pills-flights" type="button" role="tab" aria-controls="pills-flights" aria-selected="false">Flights</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-log-tab" data-bs-toggle="pill" data-bs-target="#pills-log" type="button" role="tab" aria-controls="pills-log" aria-selected="false">Log</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-settings-tab" data-bs-toggle="pill" data-bs-target="#pills-settings" type="button" role="tab" aria-controls="pills-settings" aria-selected="false" disabled>Settings</button>
            </li>
        </ul>
    </div>

    <div class="row g-0 flex-grow-1 overflow-auto">
        <div class="tab-content flex-grow-1 overflow-auto" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-status" role="tabpanel" aria-labelledby="pills-status-tab" tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-flights" role="tabpanel" aria-labelledby="pills-flights-tab" tabindex="0">...</div>
            <div class="tab-pane fade" id="pills-log" role="tabpanel" aria-labelledby="pills-log-tab" tabindex="0">
                <div id="log-entry"></div>
            </div>
            <div class="tab-pane fade" id="pills-settings" role="tabpanel" aria-labelledby="pills-settings-tab" tabindex="0">...</div>
        </div>
    </div>

</div>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

How to get scrollable tab content in bootstrap 4.1 using flex

2 Answers2