嵌套柔性盒内的响应式图像溢出父母之外？

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

（原谅散码，这是一个frankensteined版本从萨斯/角拉通过几个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的强制中心内容框填充所有剩余空间。因此，随着标题中的图像不断增加，标题高度会增加，并且内容区域会垂直缩小。

更令人困惑的是，文本内容的确如那样扩展了页眉的高度。

没有图像周围的包含div，Flexbox的拉伸图像和歪斜的纵横比。我假定包含div将通过flexbox控制，而图像（​​设置为最大宽度：100％）将缩放到该容器内允许的大小。

我在这里错过了什么？

---

注：我已经看到一些其他类似的问题，但没有一个似乎是确切的，或提供了一个合适的解决方案。例如http://bnj.bz/0D3T1I3v2C0Y和http://bnj.bz/1B3n0W2H1J21

Answer 1

罪魁祸首是关于html/body元素的height: 100%。如果您使用的是表格显示属性，则它的行为将与您的预期完全相同。铬（最近仅版本）和Firefox在这方面表现非常严格的（不管你有多少内容有，它不会比你的视口更大），而歌剧院/普雷斯托更像一个表（100％被视为最小值，不是最大值）。

值得注意的是，在某些浏览器（最明显的是一年前的Chrome版本和Opera/Presto）中，使用max-width: 100%的柔性项目内部的响应图像效果不佳。