Estoy tratando de entender lo que parece ser un comportamiento inesperado para mí:

Tengo un elemento con una altura máxima del 100% dentro de un contenedor que también usa una altura máxima pero, inesperadamente, el hijo desborda al padre:

Caso de prueba:http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

Esto se soluciona, sin embargo, si el padre tiene una altura explícita:

Caso de prueba:http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

¿Alguien sabe por qué el niño no honraría la altura máxima de su padre en el primer ejemplo? ¿Por qué se requiere una altura explícita?