IE11中左侧导航栏与内容无法独立滚动问题求助

这问题我太熟了，IE11的flex布局兼容性坑真的不少，尤其是滚动相关的场景！你遇到的问题核心原因是IE11对flex容器的高度处理逻辑和标准浏览器不一样，如果没有给容器明确的高度上下文，overflow-y: auto根本不会生效，导致导航和内容跟着一起滚动。

我给你整理几个关键修复步骤，亲测有效：

1. 先修复HTML语法错误 #

你的HTML里class属性少了等号，这会导致样式完全不生效，先修正：

<div class="wrapper">
  <div class="navigation">
    <!-- 导航内容 -->
  </div>
  <div class="content">
    <!-- 页面内容 -->
  </div>
</div>

2. 给容器添加明确的高度上下文 #

IE11需要父元素有确定的高度，才能让子元素的overflow属性生效。我们需要给html、body和.wrapper都设置100%高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免页面整体滚动 */
}

.wrapper {
  display: flex;
  display: -ms-flexbox;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  height: 100%; /* 关键：给flex容器设置高度 */
}

3. 修正导航栏的Flex属性与滚动设置 #

IE11对flex-basis的支持有问题，建议用-ms-flex的简写属性，同时明确设置导航栏的高度为100%，确保滚动区域正确：

.navigation {
  position: relative;
  -ms-flex: 0 0 280px; /* IE11推荐的flex简写：不放大、不缩小、基准宽度280px */
  flex: 0 0 280px;
  background: red;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
  z-index: 1;
  height: 100%; /* 确保导航栏高度填满容器 */
}

4. 调整内容区域的Flex属性 #

内容区域同样需要设置高度，同时修正flex属性的写法，确保在IE11中正确占满剩余空间：

.content {
  -ms-flex: 1 1 0%; /* IE11的flex简写：放大、缩小、基准宽度0 */
  flex: 1 1 0%;
  position: relative;
  overflow-y: auto; /* 内容区域也要设置滚动，避免内容溢出时撑高容器 */
  height: 100%;
}

为什么这样改？ #

• IE11的flex容器如果没有明确高度，会默认根据子元素内容高度自适应，导致overflow属性无法触发滚动。
• 用-ms-flex简写属性比单独设置-ms-flex-preferred-size等属性更兼容IE11的解析逻辑。
• 给html和body设置100%高度，是为了让.wrapper的100%高度有一个正确的参考基准。

你可以把这些修改替换掉原来的代码，再去IE11里测试，应该就能实现导航和内容独立滚动的效果了！

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