Vertical scrollbars in specific DIV containers only

Question

I am creating a page that has a list on the left, and a container showing one item is on the right. Here is an example image showing the page layout and the parts I want to scroll through.

In the left container and in the right container, I need to scroll when the data exceeds the height of the container viewport. I just want the red selected containers to scroll - the outer blue container is fixed and the yellow part inside the blue container is fixed. Only the contents of the red containers should scroll only if applicable.

I put codepen where I play with it and can share it with you (the application itself is behind the firewall, codepen is the best I can do). What you will see in the codefen is that I can make the container scroll when I set its height (in this case 380 pixels, which is free about how much space is on the screen). If you move the codefen container of the sample up, you will see that the scroll area remains fixed (duh), and if you increase the height of the scrollable container beyond 380 pixels, as soon as you go below the viewing area, the scroll starts to go away - about 800 pixels or so he completely leaves.

What the hell am I missing here? Blue containers should be located at the bottom of the viewport, be it 800px high or 1600px high. Then the red height of the container will fill this available height inside the blue container and, if necessary, scroll it.

I'm really fixated on what I'm missing here.

Change JQuery and javascript parameters are not parameters. This is achievable only with CSS, I just lose some property somewhere and at an impasse.

Change 2 . I tried the suggested html (html: height: 100%, etc.). It works in codepen, but when I try to execute it on the full version of the site, it does not work. In the screenshot here, you see that the blue area with high lighting is the scroll container in question, and the white bar on the right is the scroll bar (background in the usual style), but the actual scroll is only the background on the panel.

Answer 1

I have implemented a basic version that should help you.

You can find the code at https://codepen.io/hunzaboy/pen/aWmMeJ .

Here is 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 max height or just height

 .that-box { overflow-y:scroll; height: ###px; } 

- edit: and hide the scroll bar with a specific 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: 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 to use the units of width (vw) and viewing height (vh). Using 100 respectively for each is equivalent to the current size of your viewport.

---

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 ensures that they are scaled according to how the screen is resized.