make div scrollable inside fixed sidebar (css)

Question

can sombody help me ? The div (the last one) inside the sidebar sould be scrollable. I wanna use the sidebar for some functions like phonenumber search and displaying birthdays.

In the last div I wanna show a lot of notifications. min-height of each notification is about 100px. If there are too many i wanna make the div scrollable.

Thats my code sofar:

JSFiddle

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background-color: red;
  border: 4px solid blue;
}

.sidebar {
  position: fixed;
  top: 36px;
  bottom: 0;
  right: 0px;
  width: 200px;
  background-color: blue;
  border: 4px solid yellow;
}

.sidebar_item {
  margin-bottom: 5px;
}

.item_header {
  font-weight: bold;
  border: 1px solid #000;
  background-color: green;
}

.content {
  margin-top: 36px;
  margin-right: 200px;
  background-color: yellow;
  border: 4px solid purple;
}

<div class="navbar">Navbar</div>
<div class="sidebar">
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>


  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <!-- Scrollable div -->
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    <p>TOP</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>BOTTOM</p>
  </div>


</div>
<div class="content">
  <p>TOP</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>BOTTOM</p>
</div>

Answer 1

Used .sidebar_item:last-child Pseudo-class selector for that and calculate the height using calc()

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background-color: red;
  border: 4px solid blue;
}

.sidebar {
  position: fixed;
  top: 36px;
  bottom: 0;
  right: 0px;
  width: 200px;
  background-color: blue;
  border: 4px solid yellow;
}

.sidebar_item {
  margin-bottom: 5px;
}

.item_header {
  font-weight: bold;
  border: 1px solid #000;
  background-color: green;
}

.content {
  margin-top: 36px;
  margin-right: 200px;
  background-color: yellow;
  border: 4px solid purple;
}
.sidebar_item:last-child {
  overflow-y:auto;
  height: calc( 100% - 215px);
}

<div class="navbar">Navbar</div>
<div class="sidebar">
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>


  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <!-- Scrollable div -->
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    <p>TOP</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>BOTTOM</p>
  </div>


</div>
<div class="content">
  <p>TOP</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>BOTTOM</p>
</div>

Working Demo

Answer 2

You will need to include the overflow:auto; style in the sidebar class.

Answer 3

The scrollable div change to another name i changed it to sidebar_item2

and applied the following css

.sidebar_item2 {
    overflow-x:auto;
    height:100px;
}

Hope that is what you are trying.

Answer 4

If you want the last child to be different than the others ... scroll on y say. There is a Pseudo-class selector for that.

 .sidebar:last-child { overflow-y: scroll; }