magnetic div: fixed div inside absolute positioned div

I have the following page:

[LINK]

The page is designed to be scrolled horizontally, so that a series of divs (black bordered ones) appear in a row.

Now, I the smaller divs inside (red ones) to behave so that they never go outside the parent div but at the same time, while scrolling the page, I want them to move inside the parent div like if they were fixed-positioned.

I'll explain myself with a diagram. I want my divs to behave like this:

[LINK]

Anyone can help? Thanks for your time!