Firefox flex布局问题：如何阻止flex-direction:column下项目过度增高？

我之前也碰到过一模一样的Flexbox兼容性问题！来说说怎么解决：

首先明确问题场景：我要做一个页眉和页脚始终固定可见的布局，中间内容区域在内部内容过多时，通过overflow-y:auto实现内部滚动。在Chrome里完全符合预期，但Firefox和IE11里，中间内容区会跟着内部内容一起被撑高，直接把页脚挤出去，完全不触发滚动。

截图对比：左侧是Chrome的正常效果（页眉页脚固定，内容滚动），右侧是Firefox的问题表现（内容区被撑开，页脚下移）

问题根源 #

Firefox和IE11对Flex子项的min-height默认值处理和Chrome存在差异：它们会给Flex子项默认设置min-height:auto，这意味着子项的高度至少要能容纳内部内容，就算父容器有明确的高度限制也会忽略——这直接导致overflow-y:auto失效，因为容器本身被内容撑大了，永远不会出现“内容超出容器”的情况。

解决方案 #

只需要给中间的内容区Flex子项加一行min-height:0就行，配合正确的Flex容器设置，就能让三个浏览器表现一致：

/* 外层容器：占满整个视口高度，垂直排列子元素 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

/* 页眉和页脚：固定高度，防止被内容区挤压 */
.page-header, .page-footer {
  flex-shrink: 0;
  padding: 1em;
  background-color: #f5f5f5;
}

/* 中间内容容器：占据剩余空间，关键属性是min-height:0 */
.content-container {
  flex: 1;
  min-height: 0; /* 解决Firefox/IE11的兼容性问题 */
}

/* 内部内容区：超出容器高度时自动滚动 */
.content {
  overflow-y: auto;
  padding: 1em;
}

原理说明 #

min-height:0会覆盖Firefox和IE11的默认min-height:auto，允许Flex子项的高度被压缩到父容器分配的可用空间内。这样当内部内容高度超过这个空间时，overflow-y:auto就会生效，触发滚动，而不会撑开整个内容容器。页眉和页脚因为设置了flex-shrink:0，会一直固定在视口的顶部和底部，不会被挤压变形。

亲测这个方案在Firefox和IE11里都能完美解决问题，和Chrome的表现完全一致！

内容的提问来源于stack exchange，提问作者Liu Yi