overflow (scroll) to work with negative `left` and `top` positioned elements

Question

What is the workaround to allow scrollable overflow with elements positioned negatively from left and top?

Like here in example (jsFiddle), only 3 of the red squares are visible and scroll is not toggled. Although there are 6 of the squares, 3 of them positioned negative of 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 JQuery's scrollTop() method: http://www.w3schools.com/jquery/css_scrolltop.asp but this will also force a horizontal scrollbar beneath the wrapper div... short answer: no CSS-only solution, and positioning them absolutely obviates the scroll for this solution - try floating left and clearing each row if you want to use this method.