I am experiencing an issue with the main content part of a sidebar that should be scrollable if it overflows. Unfortunately, instead of just the sidebar scrolling, it causes the entire page to scroll. Additionally, the scrolling is intended to occur within its container rather than affecting the whole sidebar.
How can I resolve this?
The desired layout looks like this:
___
header
___
nav pill 1
nav pill 2
___
a href image
a href image
...
...
___
button
text
___
// JavaScript code snippet here
// CSS snippet here
<link href="Link_to_Bootstrap_CSS" rel="stylesheet">
<script src="Link_to_Bootstrap_JS" ></script>
// HTML code sample here
Using Bootstrap version 5.3.0 alpha1
Additionally, I would like feedback on my current approach. Each element in the sidebar is meant to have a fixed position. Should each element have `position: fixed` or only the sidebar itself? Any guidance 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