to make the container act like a containing box for the fixed-positioned elements. otherwise it is positioned relative to the viewport and we can’t get what we want
I see what you are talking about, but adding transform: inherit; doesn’t change anything for me. inherit translates to none since no parent has set anything and we are back at the start. (Something like transform: scale(1,1); prevents position: fixed from working.)
What makes a change is where you scroll:
Scrolling inside the container: Works
Scrolling inside the iframe (outside the container): Doesn’t work (sidebar escapes)
Scrolling the whole page (outside the iframe): Works
Basically the reason we see this behavior is because the text in this example is long enough to make the preview box and the two editor boxes not fit inside the default iframe height.
Maybe there can something be added to the hidden container CSS to make it work consistently, but I can’t think of anything at the moment.