Why is this flexbox layout not working in IE11?

Question

I have the following basic HTML/CSS for a flexbox layout I'm trying to use for a web page:

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>

The layout looks like what I want in Chrome, Firefox and Edge, but when I load it into IE11, the sidebar div is not stretching the vertical length of the page like it should. In fact, it's only 20px tall (which is just the padding).

Why is this happening in IE11 (which I thought supported flexbox), and more inportantly, how can I fix it? Thanks.

---

Edit: After figuring out a working solution and posting it, I don't think that this question is a duplicate of the ones linked at the top of the question because ultimately, those other posts did not have the same problem or answer the question I was asking.

Answer 1

Try changing it from flex:1; to flex: 1 0 0;

This link will explain https://stackoverflow.com/a/22883146/6288545

Answer 2

The problem is just min-height vs height semantics. Try;

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 3

IE11 only has partial support for flexbox.

Check out this site if you haven't already: https://caniuse.com/#feat=flexbox

Unless its super critical I dont think it's worth losing too much sleep over supporting a 2 generation old browser that Microsoft has long moved on from.

Answer 4

First and foremost, many thanks to Chris W. and Max Hughes for your answers and advice. Without it, I would have never found an answer. With that said, I ended up having to use a combination of both answers to get what I was looking for.

And before I provide the answer, this is what I was looking for that I wasn't getting before:

• The sidebar to always stretch 100% the vertical space of the screen of whatever is not taken up by the header.
• The sidebar to stretch to the bottom of the view window regardless of whether the page content causes the page to scroll or not.
• Something that works in Chrome, Firefox, Edge, IE10 + IE11.

With that said, the following two changes to the code in my original answer is what met all of the above conditions:

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