Почему не работает overflow-x в фиксированном div-е?

Question

[invanin]

Никак не могу заставить корректно работать скроллбар, размещенный внутри родителя с position: fixed.

Пример ситуации:

.parent {
  position: fixed;
  width: 100%;
  min-width: 200px;
  height: 100%;
  background: lightblue;
}

.child {
  float: right;
  height: 100%;
  width: 200px;
  background: lightgreen;
  overflow-x: scroll;
  overflow-y: hidden;
}
<div class="parent">
  <div class="child">
  </div>
</div>

Fiddle: https://jsfiddle.net/jqpx9gbe/4/

Нужно, чтобы при изменении размера окна оставался на экране только зеленый блок, который можно скроллить. Сейчас блок остается, но не скроллится.

Что я упускаю из виду?

Answer 1

[Егор Соколов]

Вы упускаете из виду, что overflow-x: scroll срабатывает, когда контент не помещается в блок. Т. к. у вас в блоке пусто, скроллить нечего. Попробуйте туда вставить картинку, ширина которой заведомо превышает ширину блока.

Comments

[invanin]

Добавил контент, уменьшил размер окна - скролла нет.

[Егор Соколов]

invanin, браузер не сафари случаем?

[invanin]

Егор Соколов, нет. Проверял и в хроме, и в мозилле, результат один и тот же

[Егор Соколов]

invanin, у меня есть. Проверил в хроме, мозилле, опере

[invanin]

Егор Соколов, уменьшите размер окна, чтобы остался только зеленый блок на странице.

[Егор Соколов]

invanin, не принципиально

[invanin]

Егор Соколов, странно, у меня никак не хочет отображаться.

Answer 2

[tyzberd]

у вас зеленый блок всегда 200px, даже когда в codepen вы видите 100px у блока 200
делайте как то в процентах.

Comments

[invanin]

В том-то и дело, что нужен фиксированный размер зеленого блока, чтобы при меньших размерах окна он скроллился, а не терялась часть его контента справа за экраном.

[tyzberd]

что бы он сукролился нужно, что бы в нем було что то больше 200px и скролл будет всегда https://jsfiddle.net/ptuj81n2/

[invanin]

tyzberd, сузьте окно, чтобы оно было меньше 200px - скролл исчезнет

[tyzberd]

https://jsfiddle.net/yc9jr8xw/

[invanin]

tyzberd, у child-а должна быть фиксированная ширина в 200 px, так как контент там своеобразный и под такую ширину рассчитанный. Просто непонятно, почему при уменьшении окна эти 200px не даёт браузер скроллить.

[tyzberd]

ну вот так блок 200px, контент под 200 https://jsfiddle.net/yc9jr8xw/4/