Why doesn't overflow-x work on a fixed div?

Question

css

I can't get a scrollbar placed inside a parent with position: fixed.
Situation example:

.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/
It is necessary that when the window is resized, only the green block that can be scrolled remains on the screen. Now the block remains, but does not scroll.
What am I missing?

Answer 1

You're overlooking that overflow-x: scroll fires when the content doesn't fit in the block. Since your block is empty, there is nothing to scroll. Try to insert an image there, the width of which obviously exceeds the width of the block.

Answer 2

you have a green block always 200px, even when you see 100px in the codepen for block 200,
do it as a percentage.