Html 为什么这个flexbox布局在IE11中不起作用？

我尝试将以下基本HTML/CSS用于网页的flexbox布局：

body、div、html、h1、h2、li、p、ul{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最小高度：100%；
}
.校长{
背景：深蓝色；
颜色：白色；
填充：10px；
}
.sidebarAndContentContainer{
显示器：flex；
弹性：1；
}
.侧边栏{
背景：灰色；
填充：10px；
}
.导航{
颜色：白色；
列表样式：无；
}
.内容{
填充：10px；
}

网站名称

导航链路#1
导航链路#2
导航链路#3
导航链路#4
导航链路#5

页面标题
内容

内容

内容

内容

IE11仅部分支持flexbox

如果您还没有：

---

除非它非常关键，否则我认为支持微软长期以来一直沿用的2代浏览器不值得睡太多觉。

尝试将其从

flex:1到
flex:1 0

此链接将解释问题只是
min height
vs
height
语义。尝试


body、div、html、h1、h2、li、p、ul{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
/*最小身高：100%；首先，非常感谢Chris W.和Max Hughes提供的答案和建议。如果没有它，我将永远找不到答案。尽管如此，我最终不得不使用这两个答案的组合来获得我想要的答案

在我提供答案之前，这是我一直在寻找的东西，我以前没有得到过：


侧边栏始终100%拉伸屏幕的垂直空间，无论标题是否占用
无论页面内容是否导致页面滚动，侧边栏都会延伸到视图窗口的底部
可以在Chrome、Firefox、Edge、IE10+IE11中使用

话虽如此，我在原始答案中对代码的以下两个更改满足了上述所有条件：

.container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from min-height. */
}
...
.sidebarAndContentContainer {
    display: flex;
    flex: 1 0 auto; /* Changed from flex: 1. */
}

有些人没有选择放弃对它的支持，直到它从微软（又名企业开发的奇妙世界）获得生命末期的支持。；）@ChrisW.dang，这太粗糙了。因此，为什么微软偶尔会主动要求我们中的一些人喝lol。；）@ChrisW。好吧，我想有人必须确保桌面没有坏掉总的来说，我喜欢这个答案，但我看到的一个问题是，当内容从页面上滚动下来时，侧边栏背景色会停在初始（未滚动）屏幕停止的位置（即，
高度：100%；
）.有什么想法吗？是的，你最终需要学习
grow
、
shorn
、
basis
和
order
，并改变你的整体结构。我并没有假设你希望你当前的UI内容改变到那种程度，我只是回答了一个问题，为什么你的示例页面的垂直长度没有在IE11:）我觉得我非常了解flexbox及其大多数属性，但是
flex
（以及长柄
flex-grow
、
flex-shorn
和
flex-basis
属性）我真的很困惑。我认为这三者之间的相互作用以及不同浏览器之间的差异使这一点变得非常困难。在一天结束时，我能够使用你的答案和Max Hughes的答案，只是到处玩，以得到我想要的（我将在一分钟后发布最终解决方案）。再次感谢您的帮助，但是链接CSS技巧文章中的
flex basis
解释仍然让我困惑。是的，这是一种痛苦。因此，我个人为什么通常只选择好的老式箱式布局作为核心布局，而不是flex。很高兴您得到了一个补救措施，并度过了一个愉快的周末！这是wIE11中的Works非常好，但是当内容足够从屏幕上消失时，它会导致Chrome中的边栏背景色在
height:100%；
处被切断。有什么想法吗？你试过使用
flex:10 auto；
或
flex:10 100%；
我可以用Chris W.的答案得到我需要的东西。谢谢太多了。有更清洁、更高效的解决方案。请看我发布的副本。迈克尔·B，你能就“更清洁、更高效的解决方案”的含义提供更多的指导吗？我看到的两件事是使用
flex:auto
而不是
flex:10 auto
，并使
html
和/或
body
元素
显示：flex
。首先，在IE11中仍然存在一些奇怪之处，因此
flex:auto
与
flex:10 auto
不是一回事，我读过在一些地方（我也同意），将
display:flex
添加到
html
和
body
元素可能并不理想。我缺少什么？谢谢。