IE 8 Div desaparece cuando se agregan niños que son más grandes

Como dice el título, esto es lo que está pasando básicamente:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;white-space:nowrap;'>
  </div>

Tras la interacción del usuario, realizo un trabajo: solicito algunos JSON, construyo elementos y luego agrego dichos elementos al div "contenedor". El resultado es algo como:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;'>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
 </div>

Ahora esto es lo que sucede. Si los hijos se anexa a este y superan la altura de los padres. El padre desaparece.

He buscado "hasLayout" y todo ese jazz, nada funciona.

Lo que funciona es si los niños son del mismo tamaño o más pequeños - pero debido a la naturaleza de lo que estoy tratando de lograr, esto no se desea - ni se puede garantizar que sean más pequeños.

height:auto no funciona pero establecer un valor más grande que el niño más grande corrige esto, pero sesga mi diseño

Gracias de antemano.

editar: las imágenes se cargan a través de una combinación de JSON y una cola diferida. Se garantiza que se cargarán antes de agregarlos al elemento contenedor.

básicamente :

var img = new Image();
img.onload = function () { theContainer.appendChild(this);};
img.src = someURL;

funciona bien en todos los cromo y FF

edit2: he intentado agregar las imágenes tanto al objeto "contenedor" antes como después de que se agregue al cuerpo. Ninguno produce el resultado esperado.

edición 3: *IE7 e IE9 no se comportan como se describe anteriormente. Esto es exclusivo de IE 8 *