Why is this scrollbar greyed out when the content definitely goes off the page?

Question

I'm developing a Web Application at the moment and I recently added a scrollbar to the sidebar on my application. However even though the content goes off the page at the bottom, the scrollbar never seems to become active?

Here is a codepen showing the issue:

http://codepen.io/RBrNx/pen/MbBYPZ

and here is my CSS:

.nav-side-menu {
  overflow: hidden;
  font-size: 18px;
  font-weight: 100;
  border-right: 1px solid #484848;
  background-color: #e6e6e6;
  position: fixed;
  top: 0px;
  width: 20%;
  height: 100%;
  color: #484848;
}
.nav-side-menu .brand {
  background-color: #e6e6e6;
  line-height: 75px;
  display: block;
  text-align: center;
  font-size: 32px;
  border-bottom: 1px solid #484848;
}
.chat-header {
    position: fixed;
    left: 20%;
    width: 80%;
    background-color: #e6e6e6;
    line-height: 75px;
    display: block;
    text-align: center;
    font-size: 32px;
    border-bottom: 1px solid #484848;
}

.nav-side-menu .toggle-btn {
    display: none;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 80px;
  cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  /*font-family: FontAwesome;*/
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  background-color: #3ab795;
}

.nav-side-menu li {
  padding-left: 0px;
  border-bottom: 1px solid #484848;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav-side-menu li a {
  padding-left: 20px;
  padding-top: 29px;
  padding-bottom: 29px;
  padding-right: 100%;
  text-decoration: none;
  color: #484848;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  background-color: #3ab795;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

input[type=text]{
    width: 100%;
    position: relative;
    margin: 5px 0 5px 0;
    padding: 3px 10px 3px 20px;
    box-sizing: border-box;
    border: 1px solid #484848;
    border-radius: 20px;
    background-color: #e6e6e6;
}

.search-menu{
    border-bottom: 1px solid #484848;
    padding: 5px;
}

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #e6e6e6;
    color: #484848;
    width: 30px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
}

You'll also notice that if you type, for example: '2', into the Search box, the scrollbar will still display even though there are only 2 items displayed. Is there a way to stop it appearing when it isn't necessary?

Thanks!

Answer 1

Firstly its important to understand what does position: fixed do to your element.

When you fix a position of an element it will hypothetically "pull" that element out of the document - meaning its not part of the document anymore. Another way to put it is it will ignore all elements around it including its container

In your case it means it will not bring the scroll because simply it does not know it has to(since it ignores its container it does not know what is its height & such), hence you need to specifically give it a height for it to bring the scroll.

Adding the simple below CSS would do the trick.

#menu-content {
  height: 500px; /*or the height you want*/
}

All that explanation was not needed but I thought you should know that sometimes overusing fixed could be complicated.