I have a UI element in my web application that serves as a hovering panel. The panel itself has a header, footer, and content element. The panel will have a maximum height to avoid the panel overflowing from the window (this is updated on the window.resize event). Since I'm only required to support IE10 and up, I'm using a flexbox to support this layout.
I've managed to get this working cross-browser: http://jsfiddle.net/Pyn9e/9/
(try reducing the size of the 'Result' panel, and you'll see that the content panel begins to scroll rather than overflow
However, the content of the panel is dynamic and will usual need to host another flexbox (e.g. another header, footer, content). This seems to be quite easy to do in Chrome and Firefox, but I'm having trouble getting IE10 and IE11 to work: http://jsfiddle.net/Pyn9e/11/
As you'll see in IE10 and IE11, the panel now overflows the window rather than starting to scroll.
Can anyone see a way in which I can support IE without altering the layout too much? Thanks.