Make a div non-scroll able - html

Question

I have two div in side a row named sidenav and mainscreen. I have assigned sidenav 1 column and mainscreen 11 columns by bootstrap. Floowing is the output of the following.
I want to make sidenav non scrollable but mainscreen should be srollable. Many solutions suggest using position:fixed. I tried making the position of sidenav fixed but it ruins the style of whole page. Following is the output after using fixed position of sidenav.
following is html!
<div class="container-fluid" style="width: 100%; padding: 0">
<div class="row" style="width: 100%;margin: 0px">
<nav class="sidenav col-md-1">
<ul class="menu">
<li class="menu-item">
<img src="../../assets/images/Mask Group 7.svg" alt="Logo" width="75"height="75">
</li>
<li class="menu-item">
<a routerLink ="/connect" style="width: 32%;height: 50%">
<img src="../../assets/images/home.svg" alt="Home" width="100%" height="100%">
<span class="navtext">home</span>
</a>
</li>
<li class="menu-item">
<a routerLink ="/connect" style="width: 32%;height: 50%">
<img src="../../assets/images/accept-file-or-checklist.svg" alt="Home" width="100%" height="100%">
<span class="navtext">approval </span>
</a>
</li>
<li class="menu-item">
<a routerLink ="/connect" style="width: 32%;height: 50%">
<img src="../../assets/images/folded-text-document.svg" alt="Home" width="100%" height="100%">
<span class="navtext">document</span>
</a>
</li>
<li class="menu-item">
<a routerLink ="/connect" style="width: 32%;height: 50%">
<img src="../../assets/images/wukla_logo.svg" alt="Home" width="100%" height="100%">
<span class="navtext">wukla</span>
</a>
</li>
</ul>
</nav>
<div class="mainscreen col-md-11">
<div class="header">
<div class="inputs">
<div class="input-group">
<span class="input-group-btn" style="height:45px">
<button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">hate</button>
</span>
<input type="text" class="form-control" placeholder="Product name" style="border-style: none">
<span class="input-group-btn">
<button class="searchinputbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">love</button>
</span>
</div>
<button class="uploadbtn btn btn-secondary" type="button" style="border-style: none;border-radius: 0">Upload Document</button>
</div>
</div>
<div class="mainbody">
<div class="itemstodisplay">
<div class="notification">
<div class="bodytext">pending signatures</div>
<div class="components">
<app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
<app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
<app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
<app-pendingdoc [requestid]="pendingdoc.requestid" [title]="pendingdoc.title"></app-pendingdoc>
</div>
</div>
<div class="alldocs">
<div class="bodytext">all documents</div>
<div class="components">
<app-paksigndocument></app-paksigndocument>
<app-paksigndocument></app-paksigndocument>
<app-paksigndocument></app-paksigndocument>
<app-paksigndocument></app-paksigndocument>
</div>
</div>
<div class="wukladocs">
<div class="bodytext">wukla documents</div>
<div class="components">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and following is scss!
#ID {
overflow: hidden
}
.sidenav {
position: fixed;
padding: 0;
background-color: #e6e6e6 ;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
}
.menu {
padding: 0px;
list-style: none;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.menu-item {
border-bottom: 1px solid #ffffff;
height: 10%;
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.mainscreen {
padding: 0;
height: 1450px;
}
.header {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
//width: 1259px;
width: 100%;
height: 36%;
opacity: 0.58;
background-color: #8cd1bc;
}
.mainbody {
height: 64%;
background-color: #f6f6f6;
}
.input-group{
width: 100%;
}
.searchinputbtn {
height: 20px;
}
.uploadbtn {
margin-top: 42px;
padding-left: 30px;
padding-right: 30px;
border-radius: 2px;
background-color: #e6e6e6;
font-size: 16.8px;
font-weight: bold;
letter-spacing: -0.3px;
text-align: left;
color: #ffffff
}
.inputs {
width: 35%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navtext {
font-size: 11px;
line-height: 0.95;
letter-spacing: -0.3px;
text-align: left;
color: #59626a;
}
.itemstodisplay {
width: 100%;
height: 100%;
}
.notification {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 26%;
background-color: azure;
}
.bodytext{
margin-bottom: 20px;
margin-top: 50px;
font-size: 20px;
line-height: 0.53;
letter-spacing: -0.5px;
text-align: left;
color: #73c7af;
}
.alldocs{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 38%;
background-color: cornsilk;
}
.wukladocs {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 38%;
background-color:floralwhite;
}
.components {
height: 80%;
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
can anybody help me making sidenav non-scroll able?

Answer 1

You can use position: fixed and stretch the div to the length of the whole page. This can be done with the following CSS:
div {
position: fixed;
top: 0;
bottom: 0;
}
Then you can make the mainscreen scrollable and keep the sidenav fixed.

Answer 2

Try this:
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
refer this article for more:
Usefull Article