Chrome显示问题与flexbox和溢出

时间:2015-06-10 19:10:17

标签: css google-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; }
<div>Header</div>
<div id="stretch">
    <span id="space"></span>
</div>
<div>Footer</div>

1 个答案:

答案 0 :(得分:7)

在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;
}
<div>Header</div>
<div id="stretch">
  <span id="space"></span>
</div>
<div>Footer</div>

然而,你想要相反的。目前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;
}
<div>Header</div>
<div id="stretch">
  <span id="space"></span>
</div>
<div>Footer</div>