Percentages serve as a comparison to what? (e.g., 100% of ...what?). Ensure that each parent element above the navigation also has a defined height.
For instance, if your website is structured like this:
<html>
<body>
<ul class="nav">...</ul>
</body>
</html>
The following CSS code will probably resolve your issue:
html, body, ul.nav { height: 100%; }
Edit:
Here's a more organized version in both HTML and CSS:
<html>
<body>
<ul class="nav sidebar">
<li class="nav-item sidebar-top">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search Chat" />
<button class="btn btn-secondary" type="button">Search</button>
</div>
</li>
<li class="nav-item sidebar-middle">
<nav>
<li>d</li> <!-- repeated for brevity -->
</nav>
</li>
<li class="nav-item sidebar-bottom">
<div class="d-flex justify-content-between align-items-center px-3">
<div>
<img src="https://www.jquery-az.com/html/images/banana.jpg" class="rounded-circle" width="50" height="50" alt="profile" />
<span class="ms-2">User 1</span>
</div>
<button class="btn bi-box-arrow-left"> Disconnect</button>
</div>
</li>
</ul>
<main>
<p>content on the page....</p> <!-- repeated for brevity -->
</main>
</body>
</html>
html, body {
margin: 0; padding: 0;
height: 100%;
}
body {
display: flex;
flex-flow: row nowrap;
width: 100%:
background-color: red;
}
main {
flex: 1 0 0;
overflow-y: scroll;
}
.sidebar {
margin: 0 20px 0 0; padding: 0;
list-style-type: none;
height: 100%;
display: flex;
flex-flow: column nowrap;
flex: 0 0 auto;
background-color: red;
}
.sidebar-top {
margin: 0; padding: 5px;
flex: 0 0 auto;
background-color: green;
}
.sidebar-middle {
margin: 0; padding: 5px;
flex: 1 1 auto;
overflow-y: scroll;
background-color: yellow;
}
.sidebar-bottom {
margin: 0; padding: 5px;
flex: 0 0 auto;
background-color: blue;
}