I have set up a "footer" to remain at the bottom of the page and adjust its position if the content above extends beyond the window height. While this functions correctly on Chrome, I have encountered an issue with IE11 where the footer does not adjust and allows the content to overflow over it:
https://i.sstatic.net/1EzyV.png
You can view a demo of this issue here: https://jsfiddle.net/6zrk5adu/2/
The implementation involves an upper flex container:
.upper-flex-container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
Followed by a lower flex container for the footer:
.build-version-flex-container {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 75px;
display: flex;
justify-content: space-between;
}
Is there a way to resolve this issue in IE11 and can this flex layout be compatible with IE11 at all?