Vertical Scroll Bars in specific DIV containers only - html

Question

I'm building a page that has a list on the left, and a container showing a single item's details on the right. Here is a sample image showing the page layout and the parts I want to scroll.
In both the left container and the right container, I need to scroll when the data exceeds the container's viewport height. I only want the red-highlighted containers to scroll--the outer blue container is fixed, and the yellow portion inside the blue container is fixed. Only the red containers' contents should scroll, only when applicable.
I've put up a codepen where I'm playing around with it and can share it with you (the app itself is behind firewall, codepen is the best I can do). What you'll see on the codepen is that I can get the container to scroll when I set it's height (in this case, 380px, which is loosely about how much space is there on screen). If you move the sample codepen's container up, you'll see the scroll area stays fixed (duh), and if you increase the height of the scrollable container beyond 380px, once you go below viewport, scrolling starts to go away--at around 800px or so it completely goes away.
What the heck am I missing here? The blue containers should size themselves to the bottom of the viewport, whether it's 800px high or 1600px high. Then The red container's height would fill that available height inside the blue container, and scroll if necessary.
I'm really stumped on what I'm missing here.
Edit: jQuery and javascript sizing are not options. This is achievable by CSS only, I'm just missing some property somewhere and am stumped.
Edit 2: I tried the suggested html (html: height:100%, etc). It works in codepen, but when I attempt it on my full version of the site, it doesn't work. In the screenshot here, you can see the blue high-lighted area is the scroll container in question, and the white bar on the right is the scrollbar (custom-styled background) but no actual scroll--just the bar background.

Answer 1

I have implemented a basic version which should help you out.
You can find the code over at https://codepen.io/hunzaboy/pen/aWmMeJ .
Here is the CSS
body,
html {
overflow: hidden;
}
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
width: 20%;
background: blue;
color: white;
overflow-y: scroll;
}
.content {
background: yellow;
color: brown;
overflow-y: scroll;
}

Answer 2

with css just use overflow-y:scroll and define the max height, or just height
.that-box {
overflow-y:scroll;
height: ###px;
}
--edit: and hide the scroll bar at a certain width
#media screen and (max-width: 1024px)
{
.that-box {
overflow-y:hidden; //this will cause clipping on content outside of the box
height: ###px;
}
}
--edit2: a CSS solution
html {
min-height:100%;
position:relative }
body {
height:100%}
.box {
position:fixed;
height:100%;}

Answer 3

The solution I like to use is through use of the view width (vw) and view height (vh) units. Using 100 respectively for each is the equivalent of your viewport's current size.
HTML
<div class="dashboard">
<div class="left-panel v-scroll">
<!-- the stuff on your left nav -->
</div>
<div class="right-panel v-scroll">
<!-- the stuff on your right nav -->
</div>
</div>
CSS
.dashboard{
width: 100vw;
}
.left-panel{
height:100vh;
width: 20%;
float:left;
margin-left: 20px;
}
.right-panel{
height:100vh;
width: 76%;
display: flex;
}
.v-scroll{
overflow: scroll;
}
This will ensure that they will scale according to how your screen size changes.