小编Liu*_* Yi的帖子

我一直致力于flex布局,并遇到了针对Firefox和IE11的问题.

我创建了一个codepen来展示问题.

截图

Chrome(左),Firefox(右)

描述

预期的行为是页眉和页脚始终对用户可见,而内容区域用于overflow-y: auto在需要时滚动其innerContent.问题是Firefox和Internet Explorer允许内容区域增长与其innerContent一样高,而不是保持flex box规格应该是的大小.换句话说,一旦向内容容器添加足够的内容而不是踢动滚动条,内容容器将继续变得更高,然后完全打破布局.

• 我知道使用显式高度的内容容器是一种解决方法,但它不是我们的首选或有效的解决方案.
• 由于我们的布局灵活性,我们不能只使用像百分比这样的东西.