Вложенные элементы с `position: fixed` не уважают полосы прокрутки в Chrome

Question

При наличии 2 фиксированных элементов.Полоса прокрутки внешнего элемента находится над содержимым внутренних элементов.

Это происходит только в Chrome.Я уверен, что это ошибка, но вы, ребята, можете придумать какое-нибудь исправление или обходной путь?

Пример кода:

.divWithScrollbar {
  width: 198px;
  top: 10px;
  left: 10px;
  height: 100px;
  border: 1px solid gray;
  position: fixed;
  overflow: auto;
}

.innerFixedDiv {
  top: 44px;
  left: 131px;
  width: 200px;
  position: fixed;
  z-index: 1;
  background: black;
  color: white;
}

<div class="divWithScrollbar">
  <div class="innerFixedDiv">why does this text go under the scroll bar</div>
  <div style="height: 500px;">this div just creates a scrollbar</div>
</div>

Код в скрипке: https://jsfiddle.net/x90a6q3g/3/

Answer 1

Добавление дополнительной оболочки, похоже, решает проблему:

.divWithScrollbar {
  width: 198px;
  top: 10px;
  left: 10px;
  height: 100px;
  border: 1px solid gray;
  position: fixed;
}
.wrapper {
  height:100%;
  overflow: auto;
}

.innerFixedDiv {
  top: 44px;
  left: 131px;
  width: 200px;
  position: fixed;
  z-index: 1;
  background: black;
  color: white;
}

<div class="divWithScrollbar">
  <div class="innerFixedDiv">I am not more under the scroll bar!</div>
  <div class="wrapper">
  <div style="height: 500px;">this div just creates a scrollbar</div>
  </div>
</div>