Flex modal in IE11

Question

I have prepared modal that works perfectly fine in Chrome, but crashes in IE. Could you please check what am I doing wrong? I tried multiple fallback-prefixes etc, wrapping with flex-row and so on.

http://plnkr.co/edit/Z2pQDsIMjqs4jWvytcVf?p=preview

.flex-container {
  background-color: #ccc;
  width: 100px;
  max-height: 100%;
  min-height: 200px;
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.middle {
  flex: 1 1 auto;
  overflow: auto;
  max-height: 100%;
}

Version that works on Chrome satisfies all requirements:

modal has to be aligned horizontally in the middle
footer and header have static height
when window is too big, the modal should not stretch any more
when window is to small to show full modal, the scrollback should appear for "middle" content, so the hedr and footer will always be shown
modal should be as small as possible to not show any blank spaces under "middle" content, so I cant set height: 100% on any wrapper (that would solve issue for Ie, but not for me :( )

but on IE11, when .middle is to big it either overflows the footer or makes the scroll appear on the whole modal.

It's possible you've made no mistakes. Check this page, there are a *ton* of bugs in IE related to flex: http://caniuse.com/#search=flexbox — Aeolingamenfel, Sep 23 '16 at 16:46
that would be sad, Its possible i have an older compilation or sth :/ — Marcus, Sep 23 '16 at 16:49
possible guidance: [flex property not working in IE11](http://stackoverflow.com/q/32239549/3597276) — Michael Benjamin, Sep 23 '16 at 17:46

Flex modal in IE11

0 Answers0