Making a div vertically scrollable using CSS

For 100% viewport height use:

overflow: auto;
max-height: 100vh;

Use overflow-y: auto; on the div.

Also, you should be setting the width as well.

You can use this code instead.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x: The overflow-x property specifies what to do with the left/right edges of the content - if it overflows the element's content area. overflow-y: The overflow-y property specifies what to do with the top/bottom edges of the content - if it overflows the element's content area. Values visible: Default value. The content is not clipped, and it may be rendered outside the content box. hidden: The content is clipped - and no scrolling mechanism is provided. scroll: The content is clipped and a scrolling mechanism is provided. auto: Should cause a scrolling mechanism to be provided for overflowing boxes. initial: Sets this property to its default value. inherit Inherits this property from its parent element.

You can use overflow-y: scroll for vertical scrolling.

The problem with all of these answers for me was they weren't responsive. I had to have a fixed height for a parent div which i didn't want. I also didn't want to spend a ton of time dinking around with media queries. If you are using angular, you can use bootstraps tabset and it will do all of the hard work for you. You'll be able to scroll the inner content and it will be responsive. When you setup the tab, do it like this: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... the point is, you don't want a title or image icon. then hide the outline of the tab in cs like this:

.nav-tabs {
   border-bottom:none; 
} 

and also this .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} and finally to remove the invisible tab that you can still click on if you don't implement this: .nav > li > a {padding:0px;margin:0px;}

Well the above answers have give a good explanations to half of the question. For the other half.

Why don't just hide the scroll bar itself. This way it will look more appealing as most of the people ( including me ) hate the scroll bar. You can use this code

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

Refer to this gist: https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

It might help you to create a layout using flex and having self scrollable split panes.

body { background-color: aquamarine; margin: 0; padding: 0; } .container { height: 100vh; display: flex; flex-direction: column; background-color: bisque; } .left { width: 300px; background-color: lightblue; overflow: auto; scroll-behavior: smooth; } .right { flex:1; background-color: lightcoral; overflow: auto; scroll-behavior: smooth; } .sidebar-item { display: block; height: 100px; background-color: lightseagreen; margin: 5px; } .header { display: block; height: 100px; flex:none; background-color: aqua; } .content { flex:1; background-color: brown; display: flex; overflow: auto; }

I have added some comments in the code for explanations. And here is some reference : https://www.w3schools.com/css/css_overflow.asp

div { overflow-y: auto; /* the auto value is similar to scroll, but it adds scrollbars only when necessary */ word-break: keep-all; /* this is optional, so the words keep in one line */ white-space: nowrap; /* this is optional, so the div can expands to the side */ }