Overflow div inside fixed div

Question

Pretty much I already have what I want. The overflow-y I want to be able to be scrolled through if it goes off screen inside the div#scrollable, but once the overflow is there it will not scroll down all the way to option 8 leaving it not visible. Why is this so, and how can I fix it?

* {
  margin: 0;
  padding: 0;
}
#fixed {
  width: 300px;
  height: 100%;
  max-height: 345px;
  position: fixed;
  background: #333;
  border: 2px solid #333;
}
#menu {
  background: pink;
  line-height: 25px;
  padding-left: 20px;
}
#scrollable {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

ul {
  list-style: none;
}
ul li a {
  color: white;
  line-height: 40px;
  padding-left: 20px;
  display: block;
}
ul li a:hover {
  background: blue;
}

<div id="fixed">
  <div id="menu">
    Hello
  </div>
  <div id="scrollable">
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
      <li><a>Option 3</a></li>
      <li><a>Option 4</a></li>
      <li><a>Option 5</a></li>
      <li><a>Option 6</a></li>
      <li><a>Option 7</a></li>
      <li><a>Option 8</a></li>
    </ul>
  </div>
</div>

https://jsfiddle.net/3hm1rxut/2/

Answer 1

You need to calculate the height of #scrollable div with calc() because in this menu also take some space of it so that #scrollable not getting 100% height of the div.

height: calc(100% - 30px);

* {
  margin: 0;
  padding: 0;
}
#fixed {
  width: 300px;
  height: 100%;
  max-height: 345px;
  position: fixed;
  background: #333;
  border: 2px solid #333;
}
#menu {
  background: pink;
  line-height: 25px;
  padding-left: 20px;
}
#scrollable {
  position: absolute;
  height: calc(100% - 30px);
  width: 100%;
  overflow-y: auto;
}

ul {
  list-style: none;
}
ul li a {
  color: white;
  line-height: 40px;
  padding-left: 20px;
  display: block;
}
ul li a:hover {
  background: blue;
}

<div id="fixed">
  <div id="menu">
    Hello
  </div>
  <div id="scrollable">
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
      <li><a>Option 3</a></li>
      <li><a>Option 4</a></li>
      <li><a>Option 5</a></li>
      <li><a>Option 6</a></li>
      <li><a>Option 7</a></li>
      <li><a>Option 8</a></li>
    </ul>
  </div>
</div>