CSS y-Axis overflow scroll bar, x-Axis overflow display

This is my work encountered a problem, troubled me for several days, a thorough understanding of what is called thinking is very important.

The contents of the yellow box is to go beyond the scroll bar, the red block is based on the other elements to locate, so I added the Overflow-y:auto, and then appeared below this scene.

You'll find the scroll bars appear after the red release, and then I change to this.

Do you think it's solved by having the x-axis overflow without cutting any content or scroll bars? I am filled with joy to see the effect, still no solution, distressed a few days of various search answers, in fact, this y-axis scroll bar x-Axis Overflow display effect is not done, if someone can do to teach me.

So I came up with another way:

Set the Overflow:auto to the outermost container, let it scroll when it is out of the container, and then make the scroll bar invisible

This is beyond the page can also scroll the box also exist, I really feel, write code really important idea!!!

CSS y-Axis overflow scroll bar, x-Axis overflow display