make parent scroll to a certain point and then child scroll inside parent

Edit:

Here is a new fiddle that better illustrates what I'm going for: https://jsfiddle.net/gta4eo3L/3/.

Note how in order to see all the child content you need to scroll twice. Once to make the parent go into full view; then again to scroll the content in the parent. My question is how do I make this happen in a seamless motion? In other words, how do I make the scroll "momentum" from the first scroll carry over to the second one.

Original:

How can I achieve this behaviour seamlessly? The parent height is fixed and I can use position:sticky to hold it in place; but combined with the overflow:scroll property, the child will scroll inside the parent before the parent reaches the stopping point.

Check out my fiddle here: https://jsfiddle.net/xzo1teaw/11/

It's kind of working but does not transition smoothly between the parent scrolling and child scrolling within the parent.