Trying to figure out how to create a scrollable div block that moves independently while the other content remains static. Currently, when scrolling down, the div moves up and creates an unwanted space between the other elements. Any suggestions on how to fix this?
HTML
<div class="wrapper">
<div class="side-navbar">
<h1>horse</h1>
<h1>horse</h1>
<h1>horse</h1>
<h1>horse</h1>
<h1>horse</h1>
</div>
<div class="content-right">
<div class="news">
<p>header next to side navbar</p>
</div>
<div class="user-content">
<p>
(Content Here)
</p>
</div>
</div>
</div>
CSS
.wrapper {
display: flex;
position: relative;
}
.wrapper .side-navbar {
position: fixed;
width: 200px;
height: 97%;
background: antiquewhite;
padding: 30px 0;
top: 5;
}
.wrapper .content-right {
width: 100%;
margin-left: 210px;
}
.wrapper .content-right .news {
padding: 130px;
background: red;
position: fixed;
width: 80%;
}
.wrapper .content-right .user-content {
padding: 20px;
background: red;
margin-top: 300px;
width: 100%;
position: absolute;
overflow: auto;
}
https://i.sstatic.net/WQ0ju.png Looking to isolate the scrolling functionality to just one particular div within the layout.