Using flexbox with overflow:auto is not working in IE11

Question

I have the following example, it is an example of a modal window i am using within my app. The problem is in IE11 it is not displaying the overflow correctly and instead the text flows out the bottom.

Various fixes going around for IE like setting flex:1 have not given me the desired results. What am i missing to get IE11 to behave?

#main {
  display: flex;
  position: absolute;
  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  background-color: gray;
  max-height: 150px;
  flex-direction: column;
}

.top, .bottom
{
  color: white;
  background: blue;
}

.content {
  overflow: auto;
}

<div id="main">
  <div class="top">Top</div>
  <div class="content"> asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br />
   asojsadoijdasoijasoijoasijoiasdjiojasd<br /></div>
  <div class="bottom">Bottom</div>

</div>

https://codepen.io/anon/pen/dRWGBr

Answer 1

EDIT

This answer now stops content to always have 150px height.

• Add: max-height: 150px to .content
• Keep: overflow: auto; on .content

https://codepen.io/anon/pen/zzwmgX

.main {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    background-color: gray;
    flex-direction: column;
}

.top, .bottom
{
    color: white;
    background: blue;
}

.content {
    overflow-y: auto;
    max-height: 150px;
}