CSS -изображение не появится ⇐ CSS

[Anonymous]

Я попал в это странное поведение в CSS.

Код: Выделить всё

Document

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.box {
width: 70%;
margin: auto;
height: 3rem;
border: 1px solid blue;
display: flex;
}
.box img {
max-height: 100%;
width: auto;
}





[url=#]
[img]house-leave.svg[/img]
[/url]




< /code>
Изображение вообще не отображается. В инструментах разработчиков, которые я вижу, он имеет высоту и ширину 0. Теперь, если я внесу одну из следующих модификаций, он появится: 

[*] Если я удалю дисплей: Flex 

из .box
[*] Если я удалю img {max-width: 100%; Высота: Авто; }
Если я переключусь на закомментированное изображение, показывает.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ont-appear