Height 100% not occupying the full space when scroll is available - html

Question

I have a left navbar that has a height of 100% but when there's any overflow the 100% height doesn't work.
I tried giving body and html height of 100% and min-height of 100%. I also tried giving the menu min-height: 100% and 100vh height. I read a lot of StackOverflow questions but none of the solutions worked for me.
Here's the code: Or codepen: shorturl.at/dgvFL
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial
}
.nav-bar {
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>

Answer 1

Use position: fixed if you want to fix navbar position.
body {
width: 100vw;
height: 100vh;
font-family: fontReg;
overflow-x: hidden;
margin: 0;
font-family: Arial;
}
.nav-bar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
min-height: 100vh;
width: 30%;
background-color: rgba(246, 245, 243, 1);
float: left;
overflow: auto;
}
.nav-bar ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 5%;
}
.t2 {
margin-bottom: 1000px;
background-color: #dddddd;
float: right;
width: 200px;
height: 200px;
}
.nav-bar ul li {
margin: calc(100vh * .01);
}
.services {
margin-left: 30%;
display: flex;
flex-direction: column;
}
.service {
width: 50%;
margin: 20px auto;
background-color: rgba(246, 245, 243, 1);
box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
padding: 10px;
transition: 1s;
}
.service h1 {
color: orange;
font-size: calc(100vw * .05);
margin-top: 0;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
<div class="nav-bar">
<ul>
<li>Home</li>
<li> All Blogs </li>
<li>About & Contact
<li>Create A Blog</li>
</ul>
</div>
<div class="services">
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
<div class="service">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
</p>
</div>
</div>