我正在使用flexbox进行简单的页眉/正文/页脚布局。但是，当我的“正文”中包含很多内容（足以强制使用滚动条）时，我在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>在Firefox上可以使用，因为从版本34开始，它就实现了auto作为的初始值min-height。请参阅如何在FF 34.x中获得FF 33.x Flexbox行为？有关更多信息。
实际上，您可以检查是否设置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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句