css flexbox IE11 flex item content breaks out of container - html

Question

Managed to get a flexbox layout work in Firefox, Chrome, Edge, Opera.
Would like to make this work in IE11, or know for sure that it is not possible.
I have read about IE11 issues and tried setting height 100% on the container, without success. IE11 content overflows vertically all containers except body.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.header,
.footer {
height: 2em;
flex: none;
background-color: orange;
}
.content-wrapper {
flex: 1 0 auto;
width: 100%;
background-color: white;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
width: 100%;
max-width: 60em;
margin: 0 auto;
display: flex;
flex-direction: row;
background-color: red;
}
.main {
flex: 1;
padding: 1em 1em 0;
min-width: 12em;
display: flex;
flex-direction: column;
background-color: blue;
}
.main-body {
flex: 1 0;
background-color: yellow;
}
.main-toc {
order: -1;
background-color: green;
}
.nav {
order: -1;
flex: 0 0 auto;
width: 12em;
}
pre {
position: relative;
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
max-width: 100%;
background-color: silver;
}
<header class="header">
header
</header>
<div class="content-wrapper">
<div class="content">
<main id="main" role="main" class="main">
<div id="main-body" class="main-body">
<h1>H1</h1>
<p>link
</p>
<p>On the other hand, we denounce with righteous indignation ...</p>
<pre><code class="language-php">
public function publicMethodOptionalParam($p1 = null)
{
return true;
}
</code></pre>
<p>On the other hand, we denounce with righteous indignation ...</p>
</div>
<div id="main-toc" class="main-toc">
table of contents
</div>
</main>
<nav id="nav" role="navigation" class="nav">
<ul>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
<li class="is-active">Getting Started
<ul>
<li class="is-active">Introduction
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<footer class="footer">
footer
</footer>
Codepen with the above code

Answer 1

Add flex: 1 0 auto; to .content (in css).
See Codepen.
From michaPau's comment. Doing it on his behalf so this question can be resolved since he was unresponsive, and for the solution to be more accessible/explicit to people looking for it.