Overflow (scrolling) for working with negative positions "left" and "top"

Question

What workaround allows you to scroll overflow with elements located negatively on the left and top?

As here, in the example (jsFiddle) , only 3 of the red squares are visible, and the scroll does not switch. Although there are 6 squares, 3 of them are located negatively on top.

Answer 1

The only way I can think of is to wrap the squares in a div the same height as them and use the JQuery scrollTop () method: http://www.w3schools.com/jquery/css_scrolltop.asp but it will also force a horizontal bar scrolling under the wrapper div ... short answer: there is no solution only for CSS and positioning them absolutely excludes scrolling for this solution - try floating to the left and clear each line if you want to use this method.

Answer 2

I had the same problem and the only solution I could find was setting min-height and min-width using JavaScript (I did not use jQuery at all in this project).

Answer 3

You need to wrap it with another div and give it an overflow property.

http://jsfiddle.net/pb4bh/1/