Make a div use a scrollbar instead of growing bigger - html

Question

I have a navbar with a container in it. This container will hold many divs later on. It should act like a tree view. I want the navbar to fill the whole left side from top to bottom. But when the content grows bigger, it should stop growing, a scrollbar should appear.
Using height: 100% does not work because currently my navbar is empty so the bar is a small one.
Here I attached two pictures, showing what I need. I want the bar "navContent" filling untill it reaches the bottom bar.
Here you can see a working fiddle with a full overview, I want the yellow bar to grow till it reaches the bottom.
* {
margin: 0;
}
.bar {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#navBar {
height: 100%;
}
#btnBar {
height: 40px;
}
#navContent {
background-color: yellow;
}
#wrapper {
margin: 0;
}
#navBar {
float: left;
width: 30%;
overflow: hidden;
}
#mainContainer {
float: left;
width: 70%;
overflow: hidden;
}
#header {
height: 50px;
background-color: red;
}
#headerContent {
height: 100%;
width: 80%;
}
#headerTitle {
margin: auto;
}
.headerBtn {
margin: 0px 10px 0px 10px;
}
#footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: red;
}
#footerContent {
height: 100%;
}
.footerBtn {
margin: 0px 20px 0px 20px;
}
#mainContainer {
height: 100%;
background-color: inherit;
}
<div id="header">
<div id="headerContent" class="bar">
<p id="headerTitle">Title</p>
<button class="btn headerBtn">Profile</button>
<button class="btn headerBtn">Logout</button>
</div>
</div>
<div id="wrapper">
<div id="navBar">
<div id="btnBar" class="bar">
<button class="btn navBtn">New Folder</button>
<button class="btn navBtn">New File</button>
<button class="btn navBtn">Delete</button>
</div>
<div id="navContent">
navContent
</div>
</div>
<div id="mainContainer">
Content
</div>
</div>
<div id="footer">
<div id="footerContent" class="bar">
<button class="btn footerBtn">Help</button>
<button class="btn footerBtn">Conditions</button>
<button class="btn footerBtn">Terms</button>
<button class="btn footerBtn">Imprint</button>
</div>
</div>

Answer 1

I think you may be looking for:
overflow-y: scroll;

Answer 2

Here, you can review what i did here: https://codepen.io/anon/pen/JJRrjG. I used the overflow property: https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example and percentages for the heights. The code is below:
https://codepen.io/anon/pen/JJRrjG
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #fff;
font-family: sans-serif;
}
.top {
height: 10%;
background: #111;
}
.navbar {
height: 10%;
background: #444;
width: 50%;
box-sizing: border-box;
padding: 0.5%;
text-align: center;
}
.navbar span {
margin: 10px;
}
.navbar-content {
height: 80%;
width: 50%;
background: #d9d9d9;
overflow-y: auto;
}
.everything {
height: 100%;
}
.filler-space {
height: 10000px;
background: blue;
width: 70%;
margin: 10px auto;
color: #fff;
}
<div class="everything">
<div class="top"></div>
<div class="navbar">
<span>New folder</span>
<span>New file</span>
<span>Delete</span>
</div>
<div class="navbar-content">
<div class="filler-space">I take up a lot of space</div>
</div>
<div>

Answer 3

You can just set either a fixed height or a max-height. In both cases a scrollbar will automatically appear if the elements grows beyond the defined height.
If you want the scrollbar always visible (even if the content isn't that high) you can add overflow-y: scroll

Answer 4

Try it using the property overflow: auto on your class too.
This property is used when the content overflows an element's box.
It's very useful when your content is too big to fit in a specified area.