CSS Stacking of an positioned element inside an unpositioned element

Question

Unfortunately, I am having trouble understanding the CSS stacking algorithm (CSS Stacking algorithm).

I have assumed for this example that my viewport has a width of, say, 1000 pixels so that I have a horizontal scrollbar.

<div style="width:2000px;height:50px;background-color:gray;display:flex">
  <div style="width:200px;height:100%;background-color:blue;position:sticky;left:0"></div>
  <div style="width:1800px;height:100%;background-color:red;">
    <div style="width:100px;height:100%;background-color:green;position:relative"></div>
  </div>
</div>

In this example, I have a flex container with two children. The first child (blue block) is positioned and the second (red block) is not. To me, this means that since positioned elements are stacked over unpositioned elements, the first child (blue block) is always on top of the second (red block) and its descendants.

If the user scrolls horizontally, the green block that is inside the red block (2nd child of the flex container) will be rendered over the blue block (1st child of the flex container). Why is this?

I would expect that when the user scrolls horizontally, that the blue block is always displayed on top of the green and red blocks.