How to scroll all content in block with position sticky and top styles?

As you can see header always is fixed and has position: fixed, siderbar has property top: 6rem and also styles for scrolling, but content doesn’t scroll fully. How I fix it without changing header styles? I would like to stay the same what you see when run this snippet but with correct scroll.

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 1000rem;
}

.header {
  width: 100%;
  background: #000;
  display: flex;
  font-size: 4rem;
  color: #fff;
  z-index: 2;
  position: fixed;
  top: 0;
}

.sidebar-title {
  background: #999;
  width: 100%;
}

.sidebar {
  background: #f20;
  width: 20%;
  z-index: 1;
  top: 6rem;
  position: sticky;
  height: 100%;
  overflow-y: scroll;
  max-height: 100vh;  
}

<div class="container">
  <header class="header">header</header>
  
  <div class="sidebar">
    <div class="sidebar-title">SIDEBAR</div>
    <ul>
      <li>aaaaaaaaaaaaaaaa</li>
      <li>bbbbbbbbbbbbbbbb</li>
      <li>ccccccccccccccc</li>
      <li>dddddddddddddd</li>
      <li>eeeeeeeeeeeee</li>
      <li>fffffffffffffffffff</li>
      <li>ggggggggggggg</li>
      <li>hhhhhhhhhhh</li>
      <li>iiiiiiiiiiiiiiiii</li>
      <li>jjjjjjjjjjjjjj</li>
      <li>kkkkkkkkkkk</li>
      <li>llllllllllll</li>
      <li>mmmmmmmmmmmmm</li>
      <li>nnnnnnnnnnnnnnn</li>
      <li>oooooooooooooo</li>
      <li>pppppppppppp</li>
      <li>qqqqqqqqqqqqqqq</li>
      <li>rrrrrrrrrrrrrrr</li>
      <li>ssssssssss</li>
      <li>tttttttttttt</li>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
      <li>5555</li>
      
    </ul>
  </div>
</div>