How do I fix red and green blocks with CSS ？

everyone Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide! The current treatment on the green side is using

 position:sticky;
 right:0px;
 top:100px;

The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.

Is there a better way to fix the red and green blocks?

Here's what I'm trying to do so far. https://codepen.io/hong-wei/pen/wvgbbye?editors=1100