Flexbox and Internet Explorer 11 (display:flex in <html>?)
cross-browser, css, flexbox, html
Solution
According to http://caniuse.com/#feat=flexbox:
"IE10 and IE11 default values for `flex` are `0 0 auto` rather than `0 1 auto`, as per the draft spec, as of September 2013"
So in plain words, if somewhere in your CSS you have something like this: `flex:1` , that is not translated the same way in all browsers. Try changing it to `1 0 0` and I believe you will immediately see that it -kinda- works.
The problem is that this solution will probably mess up firefox, but then you can use some hacks to target only Mozilla and change it back:
@-moz-document url-prefix() {
#flexible-content{
flex: 1;
}
}
Since `flexbox` is a W3C Candidate and not official, browsers tend to give different results, but I guess that will change in the immediate future.
If someone has a better answer I would like to know!
Problem
I am planning to move away from "floaty" layouts and use CSS flexbox for future projects. I was delighted to see that all major browsers in their current versions seem to support (in one way or another) flexbox. I headed over to "Solved by Flexbox" to look at some examples. However the "Sticky Footer" example does not seem to work in Internet Explorer 11. I played around a bit and got it to work by adding `display:flex` to the `<html>` and `width:100%` to the `<body>` So my first question is: Can anybody explain that logic to me? I just fiddled around and it worked, but I don't quite understand why it worked that way... Then there is the "Media Object" example that works in all browsers except for - you guessed it - Internet Explorer. I fiddled around with that, too, but without any success. My second question therefore is: Is there a "clean" possibility to get the "Media Object" example working in Internet Explorer?