have an element stay stickied over another full width element - html

Question

I need to create form that stays stickied when scrolling through a new full width element.
On this site, you can see it in action: https://www.pillpack.com/how-it-works but after inspecting the elements, I still cant see how they achieve this effect.
Here is what my layout currently looks like:
The red rectangle is stickied and when scrolling, it will stick to the top of the viewport. The problem I am facing here is that I need the red rectangle to stay stickied even when reaching the green portion.
The way I am currently achieving this effect is essentially 2 columns within a parent container. The parent container is flexing its children elements and the red rectangle has position sticky. But now I have a full width element that my red rectangle still needs to stay sticky on.
Would love some insight on this.
EDIT:
some basic psuedo-esque code for you...
HTML
section.wrapper
div.container
div.left
form
section.wrapper.green-bg
div.container
div.left
CSS
.wrapper {
position: relative;
width: 100%;
}
.container {
max-width: 1100px;
width: 90%;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
.form {
position: sticky;
top: 0;
}
Hopefully you guys can understand the problem here. sections are full width elements. Inside sections, theres a div.container which has a max-width and is centered. Within the container is where the content goes.
The first section needs to have no background but the second section needs a green background. Since the background is full-width, it needs to be done on the section element. This causes problems because for the red rectangle to be stickied, all elements needs to be inside a parent container.

Answer 1

It's because your form is nested inside a separate wrapper from your green area. The sticky form and the green area need to be encompassed by the same parent element.
Basic example: https://codesandbox.io/s/elastic-hoover-mdy4t