我是Flexbox的新手，我正在尝试使用它来创建一个带有固定页眉，固定页脚和内容区域的布局，该内容区域填充页眉和页脚之间的可用空间。内容区域是一个可滚动区域，有3个面板（div），每个面板的高度为100％。出于演示目的，我将 a，b，c （在其中将它们称为Panel a，Panel b和Panel c）文本放在每个面板的顶部。
在Firefox v39中，面板a，b和c占据了可滚动容器的整个高度。
在Safari（v 8.0.6（10600.6.3））中，每个面板的高度都比容器高一点。如果滚动到最后一个面板（面板c），当内容完全滚动时，标题“c”不再显示。 Firefox的情况并非如此。
我想要的行为是Firefox中的行为。
这是codepen。
sed感谢。
答案 0 :(得分：12)
这里解释CSS盒子模型有点奇怪。我不愿意说谁是对的，谁是错的。但无论如何，诀窍是创建一个包含a，b和c的包装器，它包含position: absolute; top: 0; bottom: 0; width: 100%;并确保其父级具有position: relative;。见codepen