求助：仅Chrome生效的Flex滚动布局适配Firefox及IE11方案

我明白你遇到的困扰了——在Chrome里表现完美的固定页眉/页脚+侧边栏+内部滚动布局，到了Firefox和IE11就出问题：浏览器外部冒出滚动条，页脚还没法稳稳固定在底部。这其实是不同浏览器对Flexbox和视口高度计算的兼容性差异导致的，咱们来一步步把它修好。

问题根源 #

• Firefox对height:100vh结合Flexbox的处理逻辑和Chrome略有不同，容易触发额外的容器溢出
• IE11存在不少Flexbox兼容性bug，比如对flex: 1 1 auto的解析不够准确，容器高度计算也容易出问题
• 未给<html>设置高度，导致body的100vh在部分浏览器里无法正确继承视口高度

修复后的完整代码 #

HTML部分 #

<div class="parent">
  <div class="header">HEADER</div>
  <div class="main">
    <div class="side">SIDE</div>
    <div class="inner-main">
      MAIN
      <ul>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <!-- 更多测试项 -->
      </ul>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

CSS部分 #

/* 确保视口高度能正确传递到所有容器 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  /* 用min-height替代height，避免内容溢出时布局崩溃 */
  min-height: 100vh;
  width: 100%;
}

.parent {
  display: flex;
  flex-direction: column;
  background-color: green;
  /* 让父容器占满整个可用空间 */
  flex: 1;
  /* 阻止父容器内容溢出到浏览器窗口 */
  overflow: hidden;
}

.main {
  display: flex;
  flex-direction: row;
  /* 让主内容区域占据页眉/页脚之外的所有空间 */
  flex: 1;
  /* 阻止主区域内容溢出 */
  overflow: hidden;
}

.side {
  background-color: #454545;
  /* 给侧边栏设置固定宽度，也可根据需求用flex属性控制 */
  width: 200px;
}

.inner-main {
  background-color: pink;
  flex: 1;
  /* 仅在这个容器内启用垂直滚动 */
  overflow-y: auto;
}

.header, .footer {
  padding: 1rem;
  background-color: #eee;
}

关键修复点说明 #

1. 根元素高度初始化：给html和body都设置height:100%并清除默认边距，确保视口高度能正确传递到所有Flex容器。
2. 替换视口高度属性：用min-height:100vh代替height:100vh，既保证正常情况下占满视口，又能在内容意外溢出时避免布局崩溃。
3. 添加溢出控制：给.parent和.main设置overflow:hidden，阻止这两个容器的内容溢出到浏览器窗口，确保只有.inner-main出现滚动条。
4. 简化Flex属性：把flex:1 1 auto简化为flex:1，IE11对简写属性的支持更稳定，同时明确容器的空间分配规则。
5. 固定页眉页脚样式：给页眉页脚设置内边距和背景，避免内容挤压，确保它们在所有浏览器中都能固定在视口顶部/底部。

经过这些调整后，你的布局在Chrome、Firefox和IE11里都能正常工作：页眉和页脚稳稳固定在视口两端，侧边栏保持固定宽度，只有主内容区域的溢出部分会触发内部滚动，浏览器不会出现外部滚动条。

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