Предотвратить прокрутку нижележащего div

Question

Если есть способ сделать прокрутку с фиксированным элементом и предотвратить прокрутку родительского div

Html

<div class="container">
 <div class="fixed">
   Long content
  </div>
</div>

Css

.container {
  height: 2000px;
  background: green;
}

.fixed {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 100%;
  height: 1000px;
  z-index: 20;
  background:#EABFCB;
}

JSFiddle

Я действительно с нетерпением жду решения css only

Answer 1

Урегулирование. Контейнер - это поток, вы можете сделать положение контейнера фиксированным.

Answer 2

Используйте еще <div> внутри .fixed, а также ограничьте его высоту.

.container {
  height: 2000px;
  background: green;
}

.fixed {
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background:#EABFCB;
}

.fixed div {
  height: 1000px;
}

<div class="container">
 <div class="fixed">
   <div>
     Long content
   </div>
  </div>
</div>