My sidebar scrollbar is not working

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

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

Answer 2

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.