My sidebar scrollbar is not working - html

Question

I have collapsible sidebar with two tabs in my angularjs page but it is not working scroll is not visible on overflow.Requirement is scroll bar is not visible on sidebar overflow i gave scrollbar height to auto and overflow-y to scroll but not running.Does anyone know how to do this ?
Here is my Code:
CSS
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/*margin-top: 57px;*/
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
/* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: auto;
margin-left: -250px;
overflow-y: hidden;
/* overflow-y: auto, changed to Hidden By VIKAS GAYAKWAD */
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
/*width: 100%;*/
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
.fixed-brand {
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
height: 100%;
top: 0;
width: 250px;
overflow-y: scroll;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin {
margin: 0;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
.fixed-brand {
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 50px;
}
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
padding-left: 250px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0;
margin-left: -200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
.media-body {
height: 100%;
padding: 4px;
/*margin-top: 5px;*/
/*background:green;*/
}
.media.contact-card {
font-size: 11px;
padding: 5px;
border-bottom: 1px solid #3071a9;
/*color: lightcyan;*/
}
.hr {
border-bottom: 1px solid #e1e1e1;
}
/*slider tab end*/
/* Scrollbar */
.scrollbar {
overflow-y: scroll;
height: auto;
}
Html
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="" ui-sref=".client"> <i class="glyphicon glyphicon-plus"></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="scrollbar">
<!--Start SCROLL BAR, Div Added/Edited by VIKAS GAYAKWAD -->
<div class="hr"></div>
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
<!--End SCROLL BAR--->
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div ng-repeat="client in clientList">
{{client.firstName}} {{client.lastName}}
</div>
</div>
</tab>
</tabset>

Answer 1

The main problem is probbaly that the scrollbar-<div> has no "Visible" contents except for a <hr>.
Because it is empty except for some unsuported (?) HTML tags, it will show up as a short greyed scrollbar (there simply is nothing to scroll through).
Also, when you do not set the height of the scroll-<div>, the scrollbar will be useless as the DIV stretches along with the content.

Answer 2

You didn't set any max-height for the scrollbar to work. And there's no content inside the .scrollbar element.
Your css for .scrollbar should be like this:
.scrollbar {
overflow-y: scroll;
height: auto;
max-height: 400px;
}
For the scrollbar to appear add this:
.media-list {
height: 450px;
}
Note: The latter isn't necessary if you have contents added, this is just to show you that empty div won't show the scrollbar.
Fiddle