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

Question

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>

Answer 1

Try this:

CSS

* {
  margin: 0;
  padding: 0;
}



.container {

}

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

.sidebar-title {
  background: #999;
  width: 100%;
  height:30px;
  position:relative;
}

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

HTML

<div class="container">
  <header class="header">header</header>
  
  <div class="sidebar">
    <div class="sidebar-title">SIDEBAR</div>
   <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>
</div>