Bootstrap 5 fixed height container w/ scrolling contents

Question

Here is the code I currently have - I am hoping to have the "last item" visible only after scrolling the container viewport (ex: .scrollable). Right now it adjusts the parent to accommodate and thus only the main html/body scrollbar shows. Is this possible using the flexbox utilities? Help! :)

<div class="container-fluid h-100 ">
    <div class="row h-100">
        <div class="col">
            <div class="h-100 d-flex flex-column">
                <div class="row my-3">

                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input"
                               aria-label="First name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input"
                               aria-label="Last name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Last name"
                               aria-label="Last name">
                    </div>

                </div>
                <div class="row mb-3">
                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                        <button type="button" class="btn btn-outline-primary p-2 bg-white"
                                style="border: 1px solid #ced4da">Overview</button>
                        <button type="button" class="btn btn-outline-primary bg-white"
                                style="border: 1px solid #ced4da">Tickets</button>
                        <button type="button" class="btn btn-outline-primary bg-white"
                                style="border: 1px solid #ced4da">...</button>

                    </div>
                </div>

                <div class="row h-100 mb-3 mx-0 ">

                    <div class="container-fluid h-100">
                        <div class="row h-100">
                            <div class="col-4 h-100 p-0 m-0">
                                <div class="card h-100 border rounded bg-white">
                                    <div class="card-header">
                                        List
                                    </div>
                                    <div class="card-body p-0 m-0">
                                        <div class="list-group h-100 list-group-flush rounded-0">
                                            <div class="h-100 scrollable overflow-auto">
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Show item<br>
                                                Last item<br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Remember, h-100 is relative to the height of the parent, and the parent must have a defined height. Therefore, use vh-100 overflow-hidden on the element you want to be viewport height. The force the parent of the scrollable container to stay within that height. Finally use overflow-auto on the scrollable element...

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="d-flex flex-column vh-100 overflow-hidden">
                <div class="row my-3">
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="First name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="Last name">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control form-control-lg" placeholder="Last name" aria-label="Last name">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                        <button type="button" class="btn btn-outline-primary p-2 bg-white" style="border: 1px solid #ced4da">Overview</button>
                        <button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">Tickets</button>
                        <button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">...</button>
                    </div>
                </div>
                <div class="row h-100 mb-3 mx-0 overflow-hidden">
                    <div class="container-fluid h-100">
                        <div class="row h-100">
                            <div class="col-4 h-100 p-0 m-0">
                                <div class="card h-100 border rounded bg-white">
                                    <div class="card-header"> List </div>
                                    <div class="card-body p-0 m-0 overflow-hidden">
                                        <div class="list-group h-100 list-group-flush rounded-0">
                                            <div class="h-100 scrollable overflow-auto"> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Last item<br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/mpjmGWAkQa