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>

- user6420862

---

你应该关闭你的“<p>”标签。 - jmattheis

https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items - Michael Benjamin

我并不是说这是一个解决方案，但是1.) 你真的应该关闭你的<p>标签（正如jmattheis已经写过的那样），2.) 你可能想在section和aside中的最后一个属性后添加分号。 - Johannes

尽管从一致性的角度来看，我同意闭合P标签是不必要的：https://dev59.com/JWoy5IYBdhLWcg3wkO-g - Chris

我能给你的最好建议是使用完整的速记声明...而不是使用 flex: 1;，应该使用 flex: 1 0 auto;。 - admcfajn

Answer 1

根据Flexbugs：

在IE 10-11中，对于flex容器上的min-height声明可以用于调整容器大小，但是它们的flex子项似乎不知道其父容器的大小。它们表现得好像没有设置高度一样。

下面是几个解决方法： 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>

- Stickers

Answer 2

请参考“Can I Use”获取IE11 Flexbox的完整bug列表和更多信息

IE11和其他浏览器存在大量Flexbox bug-请查看Can I Use上的Flexbox->已知问题，其中以下内容在IE11下列出：

• 在第三个参数上添加单位（flex-basis属性）是IE 11所需的
• 在IE10和IE11中，使用display: flex和flex-direction: column属性的容器，如果容器有min-height但没有显式的height属性，则不能正确计算其flex子元素的大小
• 当使用min-height时，IE 11无法正确地垂直对齐项目

还请查看Philip Walton的Flexbugs问题和解决方案列表。

- Dave Everitt

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容器的问题：

在主要的flex容器上添加overflow:hidden。如果移除overflow属性，IE EDGE会将内容推出视口而不是将其包含在flex主容器内。

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

你可以在我的 codepen 页面上查看我的测试和示例。 我用修复的方式标记了重要的CSS部分，希望能对其他人有所帮助。

- Plippie