Solution 1 :

try adding position-fixed to your div content, and declare col size, like this example.
I add a class .content-side with a margin to separe your columns.

.content-side{
    margin-left: 30%;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="6cVeUL8545aLqj1Fo8zZCGwhxzbZP5bsS4oPK5cG">
    
    
    <link rel="stylesheet" href="style.css">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Home | Larapi</title>
</head>
<body>
    <div class="container-fluid d-flex justify-content-around">
        <div class="row mx-0">
            <div class="position-fixed col-md-3 col-sm-3 bg-dark text-light vh-100">
                <h4 class="my-4 mx-3">
                    <a href="#" class="text-decoration-none">
                        <i class="fab fa-laravel text-light"></i>
                        <span class="text-light">Larapi</span>
                    </a>
                </h4>

                <h6 class="small text-uppercase mx-3">Models</h6>

                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="btn btn-block btn-primary text-left pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Model
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Model Name
                        </a>
                    </li>
                </ul>

                <h6 class="small text-uppercase mx-3">Admin</h6>

                <ul class="list-unstyled">
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Models
                        </a>
                    </li>
                    <li>
                        <a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-cog"></i>
                            Files
                        </a>
                    </li>
                    <li>
                        <a href="http://larapi.test/logout" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
                            <i class="fas fa-fw fa-sign-out-alt"></i>
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-8 col-sm-8 content-side">
                <div class="p-4">
                    <h1 class="mb-3">Home</h1>

				    <p>You are logged in!</p>

				    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>

					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
				    
				    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Solution 2 :

Adding min-vh-100 to the row worked.

Problem :

I have a row with a column I’m using for a sidebar. I want the sidebar to be 100% height even if the content has no scrollbar.

If I add vh-100 to the row, it gets cut off if the page scrolls.

It also gets cut off if I use h-100 on the html, body, container, and row.

I also tried mh-100 on the row and the same result happened.

Example: https://jsfiddle.net/L0cxhred/

How do I make it so that the sidebar column is always 100% height of the page, and doesn’t get cut off if a scrollbar is present? Preferably using what is available with bootstrap 4.

By