【发布时间】：2022-10-15 09:04:46
【问题描述】：
考虑以下标记，该标记也可通过此Fiddle 获得：
<!DOCTYPR html>
<html lang="">
<head>
<title>Flex Box Test</title>
<style>
* {
box-sizing: border-box;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: clip;
}
header,
div {
border-width: 6px;
border-style: solid;
text-align: center;
overflow: clip;
}
header,
#content,
#footer {
padding: 1em;
}
header {
border-color: #090;
background-color: #0c0;
color: #030;
flex: none;
}
#application_container {
border-color: #c90;
background-color: #fc0;
color: #330;
flex: auto;
display: flex;
flex-direction: row;
}
#sidebar {
border-color: #ccc;
background-color: #fff;
color: #999;
flex: none;
width: 150px;
}
#workbench_container {
border-color: #f3f;
background-color: #f6f;
color: #939;
flex: auto;
display: flex;
flex-direction: column;
overflow: clip auto;
}
#content_container {
border-color: #36c;
background-color: #69f;
color: #039;
flex: 1 0 auto;
}
#content {
border-color: #900;
background-color: #c00;
color: #300;
}
#content.small {
min-height: 150px;
}
#content.large {
min-height: 1500px;
}
#footer {
border-color: #999;
background-color: #ccc;
color: #333;
flex: none;
}
</style>
<head>
<body>
<header>The header shall always be visible at the top</header>
<div id="application_container">
<div id="sidebar">This is the sidebar</div>
<div id="workbench_container">
<div id="content_container">
<!-- Toggle the class between "small" and "large" to see the (failing) effect -->
<div id="content" class="small">
This is the real content whose size is unknown in advance.
Hence, it is wrapped into a content container which is at least as large as the actual content,
but can grow such that the footer is at the bottom.
</div>
</div>
<div id="footer">
For small content the footer shall be located at the bottom.
But for large content the footer shall be placed at the end of the content and be scrolled as part of the (pink) workbench container.
</div>
</div>
</div>
</body>
</html>
这应该为您提供以下框布局
顶部的绿色标题和左侧边栏应始终保持在视口的固定位置。可滚动区域应为粉红色框（代码中称为workbench_container）。只要内容很小，它们的页脚（灰色框）应放置在可视区域的底部，如屏幕截图所示。但如果内容变大，页脚将作为粉红色框的一部分滚动。
该标记按 Chrome 的预期工作。但它不适用于 Firefox。要对其进行测试，请在small 和large 之间切换div#content 的类。 Firefox 不限制粉色盒子的高度，但是粉色盒子的高度会随着它的子元素（即内容和页脚）一起增长。因此，不会出现滚动条。
只要div#workbench-container 有一个明确的（而且太小），Firefox 就会显示一个滚动条绝对高度，例如添加
#workbench_container {
height: 200px;
}
使滚动条出现。但显然，这不是一个解决方案，因为我事先不知道高度。如果我设置 height: 100% 没有任何变化。根据 CSS 规范，这应该分配最近的定位祖先的高度，即#application-container。
这是一个 Firefox 错误还是我错过了什么？如何使其以跨浏览器兼容的方式工作？如果是 Firefox 错误，我该如何解决这个错误？
只要视口足够大，Firefox 开发者工具就会显示如下内容：
- 内容大小：275px
- 灵活性（元素可增长）：+18px
- 最终尺寸：293px
然而，在没有足够空间的坏情况下，我们得到
- 内容大小：275px
- 灵活性（元素可收缩）：-18px
- 最小尺寸：275px
- 最终尺寸：275px 换句话说，盒子并没有缩小（为什么？！），而是在 Firefox 开发者工具中出现了一个小挂锁。
附加限制：
- 页脚的大小事先不知道，因为它显示用户提供的内容，因此可能有几行文本。否则（如果知道大小），我可以想象一个使用 CSS
calc的解决方法，这不是一个选项。
【问题讨论】：