Flexbox footer element does not stick to bottom in IE11

I'm using Flexbox to lay out a site and IE11 is not playing nicely. The footer element is supposed to be at the bottom of the page or the bottom of the content, whichever is longer. This works fine in all other browsers including IE10. But in IE11 it does not stick to the bottom of the page. According to https://msdn.microsoft.com/en-us/library/jj127304(v=vs.85).aspx the justify-content property does not need any vendor prefixes. What gives? Why does this break in IE11 and not IE10?

Here's the live page I'm working with: https://www.tntech.edu/dev/ttu15.interior

Answers


Have a read at http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ for a full explanation.

The actual solution apply the following changes

#rap{height:100vh;}/*change min-height to height*/
#rap > header,
#rap > footer{flex-shrink:0}
#rap > main{flex: 1 0 auto;}

Need Your Help

Find out whether celery task exists

python task status celery

Is it possible to find out whether a task with a certain task id exists? When I try to get the status, I will always get pending.