Grid "strobes" when encapsulated within CSS scroll bars

I have a <DIV class="scrollable"> where:

.scrollable
{
    overflow-x: scroll;
    overflow-y: scroll;
}

Ordinarily, this causes the browser to render scroll bars when the content of the DIV is wider or taller than the DIV itself.

However, when the content of the DIV is a Grid, the scroll bars no longer work properly. I.e., there is never a horizontal scrollbar regardless of how narrow or wide the DIV gets, and the vertical scrollbar always shows a bar that is almost as tall as the DIV regardless of how tall or short the DIV is.

This problem can be "fixed" by commenting out the height and width attributes of the active-controls-grid selector, like this:

.active-controls-grid
{
    position:relative;
    overflow:hidden;
    /*width:100%;
    height:100%;*/
    cursor:default;
    -moz-user-focus:normal;
    -moz-user-select:none;
    text-align:left;
}

However, doing this introduces a much nastier problem: The entire Grid appears to be continuously redrawn (~10 time per second) so that the Grid appears to "strobe".

When the Grid is larger than the DIV element it is contained within, the scrollbars are drawn correctly, but the strobing is much slower (~3 times per second) and much more annoying!

In either case it is a real problem.

Does anybody know what the problem might be, and how I can get around it?

Thanks.