I am encountering a scrollbar issue with a bootstrap list group on my single-page website. Despite setting the page to occupy 100% of the view using flexbox, the scrollbar is extending beyond the view, and the html/body scrollbar is being utilized instead.
Previous attempts to resolve this problem have been unsuccessful, including reviewing these queries:
Page extends past edge of screen
How can I combine flexbox and vertical scroll in a full-height app?
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b958b">[email protected]</a>/dist/css/bootstrap.min.css">
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.min-100 {
min-height: 100%;
}
.sideBar {
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 d-none d-md-flex">
<div class="col px-0 list-group list-group-flush h-100 sideBar">
<a class="list-group-item text-dark p-3" style="background-color: rgba(0,0,0,.03);">
<div class="d-inline-block float-start position-relative me-3">
<img class="" src="https://avatars.githubusercontent.com/u/48397556?v=4" style="max-width: 3rem;" />
<span class="badge border border-light rounded-circle bg-success p-2 position-absolute top-100 start-100 translate-middle"><span class="visually-hidden">online</span></span>
</div>
<div>
You<br>
<small class="fw-light text-muted text-truncate d-block">This is a status</small>
</div>
</a>
...
<div class="col px-0 bg-danger">
4
</div>
</div>
</div>
</body>
</html>Please note that the page layout is hidden on small devices, so adjustments may be necessary.