Vertical Scroll Bars in specific DIV containers only

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;
}