I am facing an issue with my page layout that includes a sidebar. The content in the sidebar is overflowing the page, so I attempted to use CSS properties like overflow-y: hidden and max-height: 100vh on the main element, as well as overflow-y: auto on the list group to enable scrolling. However, this solution did not work as intended. Despite cutting off the overflowing content, the scroll bar was not visible.
main {
height: 100vh;
max-height: 100vh;
overflow-y: hidden;
}
.scrollarea {
overflow-y: auto;
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908d908e93dfd2ced6df8f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb6abb5a8e4e9f5ede4b4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<main>
<header class="col-12 navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<div class="navbar-nav ms-auto">
<div class="nav-item text-nowrap justify-self-end">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid d-flex flex-column">
<div class="row flex-grow-1">
<div class="col-md-4 border-end gx-0 d-flex flex-column flex-shrink-0">
<div class="d-flex justify-content-center mt-2 border-bottom">
<h2>Placeholder</h2>
</div>
<div class="list-group list-group-flush scrollarea">
(Content of the list group here)
</div>
</div>
<div class="col-md-8">
main content
</div>
</div>
</div>
</main>
</body>
</html>I'm seeking guidance on how to create a scrollable sidebar using Bootstrap classes efficiently. Any suggestions would be highly appreciated.