How to stop absolute div from overflowing from parent?

Question

I have a long div inside a parent.

I think it needs to be absolutely positioned because I want to to scroll horizontally.

However I only want the section inside the parent div to be visible. I thought setting overflow: hidden on the parent would achieve this, however no such luck....

See this js fiddle for an example.

Does anyone know how to get this effect?

Thanks

Answer 1

You should set the parent (box1) to position:relative; Otherwise the box2 gets positioned relative to the body and gets outside the flow of box1.

Editted example