Отзывчивые изображения внутри вложенных flexboxes разливаются за пределами их родителей?

Question

У меня довольно сложная схема Flexbox (несколько уровней в глубину). Кажется, что все работает нормально, пока я не включу некоторые отзывчивые изображения в flexboxes. Я заметил, что родительский элемент не расширяется вертикально, чтобы обеспечить высоту изображения.

Из-за некоторые требования, мы должны использовать несколько версии реализации Flexbox например:

.foo { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
} 

Fiddle

(Pardon рассеянного код, это frankensteined версия вытянула от Sass/Углового проект, который генерируется с помощью нескольких функций Sass)

Основной макет CSS:

// main wrapper for the page 
.international { 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
    -ms-flex-direction: column; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
    height: 100%; 
    width: 100%; 
} 

// primary header container 
.skin__header { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
} 

// container for page headers 
.headings { 
    flex-grow: 1; 
} 

// right hand content within the header 
.branding { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
    flex-shrink: 1; 
} 
// container around both images 
.branding__images { 
    order: 1; 
    justify-content: flex-end; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
    align-items: center; 
} 
// container for logo 
.branding__logo { 
    order: 1; 
} 
// container for text 
.branding__text { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
    align-items: flex-start; 
} 

// primary center content of page 
.content { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
    flex-grow: 1; 
} 

// primary container for the footer 
.skin__footer { 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: box; 
    display: flex; 
} 

Логически, мой мозг говорит: высота заголовка и нижнего колонтитула определяется их содержимым для браузера, а затем flexbox заставляет поле содержимого центра заполнять все оставшееся пространство. Так как изображения внутри заголовка растут, высота заголовка растет, а область содержимого сжимается вертикально.

Еще большее недоумение, текстовое содержимое делает расширяет высоту заголовка, как ожидалось.

Без содержащихся divs вокруг изображений flexbox растягивает изображения и искажает соотношение сторон. Я предположил, что содержащий div будет управляться через flexbox, в то время как изображение (установленное max-width: 100%) будет масштабироваться до разрешенного размера в этом контейнере.

Что мне здесь не хватает?

---

Примечание: Я видел некоторые другие simimlar вопросы, но никто не похоже, чтобы быть точным или предложить решение, которое подходит. например http://bnj.bz/0D3T1I3v2C0Y и http://bnj.bz/1B3n0W2H1J21

Answer 1

Преступник является height: 100% по элементам html/body. Если бы вы использовали свойства отображения таблицы, они бы вели себя точно так, как вы ожидали. Chrome (недавние сборки только), и Firefox ведут себя очень строго в этом отношении (независимо от того, сколько у вас контента, оно будет не больше вашего окна просмотра), в то время как Opera/Presto ведет себя как таблица (100% рассматривается как минимум, а не максимум).

Следует отметить, что в некоторых браузерах отзывчивые изображения плохо переносятся с использованием max-width: 100% (в частности, Chrome работает примерно год назад и Opera/Presto).