Why Is IE11 Rendering This Flexbox Layout Incorrectly?

Question

I have a flexbox based layout that involves a centered container comprising of a header and body.The container has a minimum height to prevent it collapsing too much if there is little content in its body. It also has a max-height defined as a percentage of its container.

The header is a fixed height, and the body is set to overflow-y: auto. In Chrome, Safari and Firefox, this means:

1. If there is little body content, the container collapses down to its min-height.

2. As the amount of body content increases, the body (and therefore the container) expand vertically.

3. If the increase in body content means the container reaches its maximum height, the body's vertical scrollbar is triggered.

However in IE11, if the body content increases in height beyond the available space it (sometimes) extends out beyond the confines of the container (resizing the window sometimes triggers this issue and sometimes fixes it).

Codepen

I can't find any mention of an IE bug that would cause this.

/* Box Sizing */

html {
  box-sizing: border-box;
}
  
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Reset */

body,
html {
  width: 100%;
  height: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Start propper */

.Wrapper {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  outline: 1px red solid;
  display: flex;
  align-items: center;
  min-height: 500px;
}

.Flexbox {
  min-width: 60%;
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: 0 auto;
  max-height: 60%;
  outline: 1px blue solid;
}

.Flexbox >* {
  padding: 20px;
}

.Flexbox-header {
  flex: auto 0 80px;
  border-bottom: 1px solid green;
}

.Flexbox-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

<main class="Wrapper">
  <div class="Flexbox">
       <header class="Flexbox-header">HEADER</header>
       <div class="Flexbox-body">
         <ul>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
         </ul>
       </div>
  </div>
  
</main>

Answer 1

It seems you've run into a known bug in IE 10-11. Basically flexbox does not work properly with min-height and max-height.

Here is the official bug report for the issue:

Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview.

Substituting max-height for height will make it work as expected, but is less-than-ideal:

Codepen