Я пытаюсь понять то, что кажется мне неожиданным поведением:

У меня есть элемент с максимальной высотой 100% внутри контейнера, который также использует максимальную высоту, но неожиданно дочерний объект переполняет родительский:

Прецедент: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%; 
}

Это исправлено, однако, если родителю дана явная высота:

Прецедент:http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Кто-нибудь знает, почему ребенок не соблюдает максимальную высоту своего родителя в первом примере? Почему требуется явная высота?