Element using overflow: scroll has scrollbar going off screen

Question

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

#sidebar {
  background-color: white;
  height: 100%;
  width: 20%;
  float: left;
  position: fixed;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  padding-bottom: 6em;
  overflow-x: scroll;
}

The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.

Answer 1

Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:

#sidebar {
  top: 0;
  bottom: 0;
}

You could also use window units:

#sidebar {
  height: 100vh;
}