Абсолютно позиционированный блок внутри overflow: auto?

Question

[r_g_b_a]

Здравствуйте.
Есть такой пример https://jsfiddle.net/bj5hzetw/, где синий блок отображается справа от красного.
Допустим, я хочу ограничить высоту красного блока и добавить вертикальную прокрутку. Но после этого получаю такой результат https://jsfiddle.net/50xok43m/1/ Появляется не желательная горизонтальная прокрутка, а синий блок больше не может визуально находится за пределами красного.
Я уже почти смирился, что без js тут не обойтись, но наткнулся в сети на решение, где все работает jsfiddle.net/jeysinghanbu/6fg4rafc/9 Объясните, каким образом там не появляется горизонтальный скролл?

Comments

[Ankhena]

Смотрите у кого overflow и относительно кого позиционируется выпадашка.

[r_g_b_a]

Ankhena, разобрался, спасибо!

Answer 1

[Богдан Шевченко]

.nav {
  background: #f00;
  width: 200px;
  height: 150px;
  overflow-y: scroll;
}
.subnav {
  background: #00f;
  position: absolute;
  left: 200px;
  top: 16px;
  width: 200px;
}

Не уверен из-за чего возникает эта проблема, но что-бы её избежать нужно позиционировать блок не относительно nav, а eё обёртки, таким образом overflow не будет действовать на абсолютный блок