Flexbox 在 Internet Explorer 11 中不起作用

Question

这段代码在 Firefox、Chrome 和 Edge 中运行良好，但显然由于 flex 模型在 IE11 中无法正常运行。 我该如何解决？

这是它在 Firefox 中的样子

这是它在 IE11 中的样子

 body * { box-sizing: border-box; } html { height: 100%; } body { min-height: 100%; display: flex; flex-flow: column; margin: 0; } main { flex: 1; display: flex; } header, footer { background: #7092BF; border: solid; width: 100%; } section { border: solid; background: #9AD9EA; flex: 1 } aside { border: solid; width: 150px; background: #3E48CC }

 <header> <p>header </header> <main> <aside> <p>aside <p>aside </aside> <section> <p>content <p>content <p>content <p>content </section> </main> <footer> <p>footer <p>footer </footer>

Answer 1

根据Flexbugs ：

在 IE 10-11 中，flex 容器上的min-height声明用于调整容器本身的大小，但它们的 flex item 子项似乎不知道其父项的大小。 它们就好像根本没有设置高度一样。

这里有几个解决方法：

1. 始终填充视口 + 可滚动的<aside>和<section> ：

 html { height: 100%; } body { display: flex; flex-direction: column; height: 100%; margin: 0; } header, footer { background: #7092bf; } main { min-height: 0; /* added 2021*/ flex: 1; display: flex; } aside, section { overflow: auto; } aside { flex: 0 0 150px; background: #3e48cc; } section { flex: 1; background: #9ad9ea; }

 <header> <p>header</p> </header> <main> <aside> <p>aside</p> </aside> <section> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> </section> </main> <footer> <p>footer</p> </footer>

2. 初始填充视口 + 普通页面滚动更多内容：

 html { height: 100%; } body { display: flex; flex-direction: column; height: 100%; margin: 0; } header, footer { background: #7092bf; } main { flex: 1 0 auto; display: flex; } aside { flex: 0 0 150px; background: #3e48cc; } section { flex: 1; background: #9ad9ea; }

 <header> <p>header</p> </header> <main> <aside> <p>aside</p> </aside> <section> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p> </section> </main> <footer> <p>footer</p> </footer>

Answer 2

有关 IE11 Flexbox 错误的完整列表等，请参阅“我可以使用吗”

IE11 和其他浏览器中存在大量 Flexbox 错误 - 请参阅Can I Use -> 已知问题上的 flexbox ，其中在 IE11 下列出了以下内容：

• IE 11 需要将一个单位添加到第三个参数中，即 flex-basis 属性
• 在 IE10 和 IE11 中，如果容器具有min-height但没有明确的height属性，则具有display: flex和flex-direction: column的容器将无法正确计算其弯曲子项的大小
• 使用min-height时，IE 11 无法正确垂直对齐项目

另请参阅 Philip Walton 的Flexbugs问题和解决方法列表。

Answer 3

我已经使用 flexbox 测试了一个完整的布局，它包含页眉、页脚、带有左侧、中间和右侧面板的主体，面板可以包含菜单项或页脚和应该滚动的页眉。 相当复杂

IE11 甚至 IE EDGE 在显示 flex 内容时都有一些问题，但可以克服。 我已经在大多数浏览器中测试过它，它似乎有效。

我应用的一些修复是 IE11 高度错误，将 height:100vh 和 min-height:100% 添加到 html/body。 这也有助于不必在 dom 中设置容器的高度。 还要使 body/html 成为一个 flex 容器。 否则 IE11 将压缩视图。

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

修复了 IE EDGE 溢出 flex 容器的问题：overflow:hidden on main flex container。 如果删除溢出，IE EDGE 会将内容推出视口，而不是将其包含在 flex 主容器内。

main{
    flex:1 1 auto;
    overflow:hidden; /* IE EDGE overflow fix */  
}

您可以在我的codepen页面上查看我的测试和示例。 我用我应用的修复程序评论了重要的 css 部分，希望有人觉得它有用。