为什么这个 flexbox 布局在 IE11 中不起作用？ [复制]

Question

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

body, div, html, h1, h2, li, p, ul {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.headerContainer {
    background: darkblue;
    color: white;
    padding: 10px;
}
.sidebarAndContentContainer {
    display: flex;
    flex: 1;
}
.sidebar {
    background: gray;
    padding: 10px;
}
.nav {
    color: white;
    list-style: none;
}
.content {
    padding: 10px;
}

<div class="container">
    <div class="headerContainer">
        <h1>Site Title</h1>
    </div>
    <div class="sidebarAndContentContainer">
        <div class="sidebar">
            <ul class="nav">
                <li>Nav Link #1</li>
                <li>Nav Link #2</li>
                <li>Nav Link #3</li>
                <li>Nav Link #4</li>
                <li>Nav Link #5</li>
            </ul>
        </div>
        <div class="content">
            <h2>Page Title</h2>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</div>

布局看起来像我在 Chrome、Firefox 和 Edge 中想要的，但是当我将其加载到 IE11 中时，侧边栏 div 并没有像应有的那样拉伸页面的垂直长度。事实上，它只有 20px 高（这只是填充）。

为什么在 IE11（我认为它支持 flexbox）中会发生这种情况，更重要的是，我该如何解决？谢谢。

---

编辑：在找出可行的解决方案并将其发布后，我认为这个问题与问题顶部链接的问题不重复，因为最终，其他帖子确实做到了没有相同的问题或回答我问的问题。

Answer 1

IE11 仅部分支持 flexbox。

如果您还没有，请查看此网站：https://caniuse.com/#feat=flexbox

除非它非常关键，否则我认为不值得为支持 Microsoft 已长期使用的 2 代旧浏览器而失去太多睡眠。

Answer 2

尝试将其从 flex:1; 更改为 flex: 1 0 0;

这个链接会解释https://stackoverflow.com/a/22883146/6288545

Answer 3

问题只是 min-height 与 height 语义。试试看；

body, div, html, h1, h2, li, p, ul {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    /* min-height: 100%;  <---- Your Culprit */
    height: 100%;
}
.headerContainer {
    background: darkblue;
    color: white;
    padding: 10px;
}
.sidebarAndContentContainer {
    display: flex;
    flex: 1;
}
.sidebar {
    background: gray;
    padding: 10px;
}
.nav {
    color: white;
    list-style: none;
}
.content {
    padding: 10px;
}

<div class="container">
    <div class="headerContainer">
        <h1>Site Title</h1>
    </div>
    <div class="sidebarAndContentContainer">
        <div class="sidebar">
            <ul class="nav">
                <li>Nav Link #1</li>
                <li>Nav Link #2</li>
                <li>Nav Link #3</li>
                <li>Nav Link #4</li>
                <li>Nav Link #5</li>
            </ul>
        </div>
        <div class="content">
            <h2>Page Title</h2>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</div>

Answer 4

首先，非常感谢 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. */
}