DIV stays empty after innerHTML assignment in Internet Explorer 6.0

I guess I'm not the first one who run into it, but I did not found a solution in the google.  So here is the problem and my solution...

Problem
There is an empty DIV, which is located in hidden outer DIV ('display' is 'none'). On some event (say, click) - outer DIV became visible, and innerDIV.innerHTML assigned to some string. It works perfectly for FF, but in IE the inner DIV stays empty. Nevertheless, Internet Explorer Developer Toolbar shows that DIV content was changed and visible.

This is how it looks like in simplified code:
HTML:

    <div id='outer'><div id='inner'></div></div>

JavaScript (with Prototype library 1.5.0_rc0):

    Element.show('outer');
    $('inner').innerHTML = 'foo';

Solution:
For the inner DIV I assigned style with height:100%, and it helped.
CSS:

#inner
{
  height: 100%;
}

Note: Somehow I cannot reproduce the problem with some simple test, so maybe I missed something.

Technorati tags: IE, JavaScript, webdev