Scrollable sidebar div issue - html

Question

I have a main content part of a sidebar that is supposed to be scrollable if it overflows. The problem is that it makes the whole page scroll instead of just the sidebar. The other problem is that it's supposed to scroll inside of it's container instead of making the whole sidebar scroll.
How do I fix this?
it's supposed to look like this:
___
header
___
nav pill 1
nav pill 2
___
a href image
a href image
...
...
___
button
text
___
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
window.onload = (event) => {
const tooltip = bootstrap.Tooltip.getInstance('#add_bot_button') // Returns a Bootstrap tooltip instance
tooltip.show();
};
document.getElementById('server_wide_button').addEventListener('click', () => {
document.getElementById('channel_specific_button').classList.remove('active');
document.getElementById('server_wide_button').classList.add('active');
});
document.getElementById('channel_specific_button').addEventListener('click', () => {
document.getElementById('server_wide_button').classList.remove('active');
document.getElementById('channel_specific_button').classList.add('active');
});
document.getElementById('add_bot_button').addEventListener('click', () => {
console.log('adding bot to guild');
});
#sidebar_header {
top: 0;
text-align: center;
position: fixed;
width: inherit;
}
#sidebar_sub_header {
/* top: 0; */
/* position: fixed;
width: inherit; */
}
#sidebar_main_content {
overflow-y: scroll;
}
#sidebar_footer {
position: fixed;
bottom: 0;
width: inherit;
}
#sidebar {
width: 250px;
min-height: 100vh;
max-height: 100vh;
}
/* #sidebar_main_content::-webkit-scrollbar {
width: 0;
height: 0;
} */
#dropdown {
align-items: center;
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<!-- <div class="col align-items-start bg-dark text-white"> -->
<div class="align-items-start text-center p-0 bg-dark text-white" id="sidebar">
<div class="p-3 bg-dark text-white" id="sidebar_header">
<span class="fs-4">
Header
</span>
<hr>
<div class="p-3" id="sidebar_sub_header bg-secondary">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link text-white active" aria-current="page" id="server_wide_button">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white" id="channel_specific_button">
Test 2
</a>
</li>
</ul>
</div>
</div>
<!-- <div class="p-3" id="sidebar_sub_header bg-secondary">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link text-white active" aria-current="page" id="server_wide_button">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white" id="channel_specific_button">
Test 2
</a>
</li>
</ul>
</div> -->
<div class="mb-auto p-3 bg-danger flex-fill" id="sidebar_main_content">
<!-- main content - scrollable -->
<ul class="nav flex-column mb-auto align-items-center">
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
</ul>
</div>
<div class="p-3 bg-dark text-white" id="sidebar_footer">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Test tooltip">
Test Button
</a>
<br><br>
<div class="dropup-center dropup">
<a href="#" class="align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
{{ wallet_address }}
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Delete User Info</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="col bg-secondary text-white" id="main_content">
One of three columns
</div>
</div>
</div>
Using bootstrap 5.3.0 alpha1
Also - is what I have right so far? Each element is supposed to be fixed in the sidebar. not sure if i need position: fixed for each element or just for the sidebar. any help would be appreciated
edit:
also where test text here 0000000000000000000000000 is, how do i shrink that or confine it inside the div?
edit2: edited code to show some updates

Answer 1

Set different overflow behaviours for the 3 containers
You want the outer container not to scroll. That is important, because if you don't specifically block scrolling of the outer container, it will scroll. That was the cause of your problem.
Then you want the sidebar itself to scroll, and the main content to (separately) scroll.
I have added to your code 3 style attributes, one for each of the 3 containers. I see you are carefully using classes, which is excellent: just put those styles into the relevant classes (I couldn't find the class for the main body text).
#sidebar_header {
top: 0;
text-align: center;
}
#sidebar_sub_header {
/* position: fixed; */
/* width: inherit; */
}
#sidebar_main_content {
overflow-y: scroll;
}
#sidebar_footer {
position: fixed;
bottom: 0;
width: inherit;
}
#sidebar {
width: 250px;
min-height: 100vh;
max-height: 100vh;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard_test.css') }}" />
<div class="container-fluid" style="height:100%; overflow:hidden;">
<div class="row">
<div class="align-items-start text-center p-0 bg-dark text-white" id="sidebar" >
<div class="p-3">
<span class="fs-4" id="sidebar_heading">
Header
</span>
</div>
<hr>
<div class="p-3" id="sidebar_sub_header">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Test 1
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Test 2
</a>
</li>
</ul>
</div>
<hr>
<div class="mb-auto p-3 bg-danger flex-fill" id="sidebar_main_content" style="height:100%; overflow-y: scroll;">
<!-- main content - scrollable -->
<ul class="nav flex-column mb-auto align-items-center">
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
<li class="nav-item">
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
<img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle" style="height:100px;width:100px">
</a>
</li>
<br>
</ul>
</div>
<div class="p-3" id="sidebar_footer">
<a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Test tooltip">
Test Button
</a>
<br><br>
<div class="dropup-center dropup">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
test text here 0000000000000000000000000
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">Delete User Info</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="col bg-secondary text-white" id="main_content">
One of three columns
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>