css – Chrome显示问题与flexbox和溢出

我正在使用flexbox做一个简单的标题/正文/页脚布局.然而,当我的“body”有很多内容(足以强制滚动条)时,我在Chrome中看到了一个问题：它会强制页眉和页脚元素在它们不应该缩小时缩小.这只发生在Chrome中(IE11和Firefox按预期工作).我应该以不同的方式使用我的CSS,还是这是Chrome的问题？

我已经将我的HTML / CSS简化为最小化以显示问题,并创建了我在不同浏览器中看到的截图(http://i.stack.imgur.com/Qn5Ln.png)：

body { height:100%; position:absolute; left:0; top:0; right:0; bottom:0; background:red; display:flex; flex-direction:column; }div { padding:10px; background:green; }div#stretch { overflow:auto; flex:0 1 auto; min-height:200px; background:blue; }#space { height:80000px; display:block; }

Header
    
Footer

在Firefox上,它可以工作,因为从版本34开始,它实现了auto作为min-height的初始值.有关详细信息,请参阅 How can I get FF 33.x Flexbox behavior in FF 34.x?.

事实上,你可以检查一下,如果你设置min-height：0,这是CSS 2.1的初始值,Firefox将表现得像Chrome.

* { min-height: 0; }

* {  min-height: 0;}body {  height: 100%;  position: absolute;  left: 0;  top: 0;  right: 0;  bottom: 0;  background: red;  display: flex;  flex-direction: column;}div {  padding: 10px;  background: green;}div#stretch {  overflow: auto;  flex: 0 1 auto;  min-height: 200px;  background: blue;}#space {  height: 80000px;  display: block;}

Header
  
Footer

但是,你想要相反.目前Chrome不支持min-height：auto,但还有另一种方法：您可以禁用缩小

* { flex-shrink: 0; }

* {  flex-shrink: 0;}body {  height: 100%;  position: absolute;  left: 0;  top: 0;  right: 0;  bottom: 0;  background: red;  display: flex;  flex-direction: column;}div {  padding: 10px;  background: green;}div#stretch {  overflow: auto;  flex: 0 1 auto;  min-height: 200px;  background: blue;}#space {  height: 80000px;  display: block;}

Header
  
Footer