Как согнуть div с фиксацией позиции?

Question

Я пытаюсь получить страницу с 2 основными элементами, одна боковая панель которой занимает 20% ширины области просмотра и имеет фиксированное положение, а другая будет основным окном, занимая 80% оставшегося пространства.

Однако кажется, что присвоение боковой панели position: fix; top: 0 удаляет все ее изгибные свойства.

Желаемое поведение: Как вы можете разместить боковую панель на пропорциональной ширине экрана, а также удерживать ее положение в верхнем положении: 0?

Примечание: было бы лучше, если бы я не мог использовать position: sticky

Вот кодекс, чтобы помочь. https://codepen.io/phil94/pen/vYORpMj

`

#side-panel {
  bottom: 0px;
  position: fixed ;
  background: #acacac;
  border: solid 3px;
  width: 20%;
  height: 100vh;
  z-index: 1;
}

#container {
  background: #3687d7;
  display: flex;
}

#main {
  background: #acacac;
  border: solid 3px;
  width: 80%;
  height: 1200px;
}

<app>
  <div id="container">
    <div id="side-panel">
      <ol>
        <li>Tomatoe</li>
        <li>Bananas</li>
        <li>Pickles</li>
      </ol>
    </div>
    <div id="main"></div>
  </div>
</app>

Answer 1

Попробуйте это: position: sticky;

#side-panel {
  bottom: 0px;
  position: sticky;
  top:0;
  background: #acacac;
  border: solid 3px;
  width: 20%;
  height: 100vh;
  z-index: 1;
}