Html Flexbox在Internet Explorer 11中不工作

这段代码在Firefox、Chrome和Edge中运行良好，但显然由于flex模型，它在IE11中无法正常工作。我怎样才能修好它

这就是它在Firefox中的外观

这是IE11中的外观

正文*{
框大小：边框框；
}
html{
身高：100%；
}
身体{
最小高度：100%；
显示器：flex；
柔性流动：柱；
保证金：0；
}
主要{
弹性：1；
显示器：flex；
}
标题，
页脚{
背景#7092BF；
边框：实心；
宽度：100%；
}
部分{
边框：实心；
背景：#9AD9EA；
弹性：1
}
旁白{
边框：实心；
宽度：150px；
背景：#3E48CC
}

标题
旁白
旁白
内容
内容
内容
内容
页脚
页脚

根据：

在IE 10-11中，flex容器上的

min height

声明用于确定容器本身的大小，但其flex项子项似乎不知道其父项的大小。它们的行为就像根本没有设定高度一样

以下是一些变通方法：

1。始终填充视口+可滚动的

和

：

html{
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
身高：100%；
保证金：0；
}
标题，
页脚{
背景#7092bf；
}
主要{
最小高度：0；/*于2021年添加*/
弹性：1；
显示器：flex；
}
旁白{
溢出：自动；
}
旁白{
柔性：0 150像素；
背景：#3e48cc；
}
部分{
弹性：1；
背景：#9ad9ea；
}

标题

旁白

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

页脚

有关IE11 Flexbox漏洞的完整列表及更多信息，请参阅“我可以使用吗？” IE11和其他浏览器中存在大量Flexbox错误-请参阅->已知问题，IE11下列出了以下内容：

• IE 11要求在第三个参数flex basis属性中添加一个单位
• 在IE10和IE11中，如果容器具有

  min height

  但没有明确的

  height

  属性，则具有

  display:flex

  和

  flex direction:column

  的容器将无法正确计算其弯曲儿童的尺寸
• 当使用

  min height

  时，IE 11无法正确垂直对齐项目

---

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

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

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

我已经应用了一些修正的IE11高度错误，将高度：100vh和最小高度：100%添加到html/正文中。这也有助于不必在dom中设置容器的高度。还将body/html设置为flex容器。否则IE11将压缩视图

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

修复溢出flex容器的IE边缘： 溢出：隐藏在主flex容器上。如果移除溢出，IE EDGE会将内容推出视口，而不是将其包含在flex主容器中

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

您可以在我的页面上看到我的测试和示例。

---

我用我已经应用的修复程序评论了重要的css部分，希望有人觉得它有用。

你应该关闭你的-tag我不是说这是一个解决方案，而是1。）你真的应该关闭你的

标记（正如jmattheis已经写过的）和2.）您可能希望在

部分的最后一个属性之后添加分号

和

旁白

。虽然我同意从一致性的角度关闭P标记，但这不是必需的：我能给您的最好建议是使用完整的速记声明。。。而不是

flex:1使用
flex:10自动