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?
This question is related to
html
css
flexbox
cross-browser
Sometimes it's as simple as adding: '-ms-' in front of the style Like -ms-flex-flow: row wrap; to get it to work also.
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!
You just need flex:1; It will fix issue for the IE11. I second Odisseas. Additionally assign 100% height to html,body elements.
CSS changes:
html, body{
height:100%;
}
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header {
background: #23bcfc;
}
main {
background: #87ccfc;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
footer {
background: #dd55dd;
}
working url: http://jsfiddle.net/3tpuryso/13/
Here is an example of using flex that also works in Internet Explorer 11 and Chrome.
HTML
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >_x000D_
<title>Flex Test</title>_x000D_
<style>_x000D_
html, body {_x000D_
margin: 0px;_x000D_
padding: 0px;_x000D_
height: 100vh;_x000D_
}_x000D_
.main {_x000D_
display: -webkit-flex;_x000D_
display: flex;_x000D_
-ms-flex-direction: row;_x000D_
flex-direction: row;_x000D_
align-items: stretch;_x000D_
min-height: 100vh;_x000D_
}_x000D_
_x000D_
.main::after {_x000D_
content: '';_x000D_
height: 100vh;_x000D_
width: 0;_x000D_
overflow: hidden;_x000D_
visibility: hidden;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
.left {_x000D_
width: 200px;_x000D_
background: #F0F0F0;_x000D_
flex-shrink: 0;_x000D_
}_x000D_
_x000D_
.right {_x000D_
flex-grow: 1;_x000D_
background: yellow;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<div class="main">_x000D_
<div class="left">_x000D_
<div style="height: 300px;">_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div class="right">_x000D_
<div style="height: 1000px;">_x000D_
test test test_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>Use another flex container to fix the min-height issue in IE10 and IE11:
HTML
<div class="ie-fixMinHeight">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
CSS
.ie-fixMinHeight {
display:flex;
}
#page {
min-height:100vh;
width:100%;
display:flex;
flex-direction:column;
}
#content {
flex-grow:1;
}
See a working demo.
body because it
screws up elements inserted via jQuery plugins (autocomplete, popup,
etc.).height:100% or height:100vh on your container because the footer will stick at the bottom of window and won't adapt to long content.flex-grow:1 rather than flex:1 cause IE10 and IE11 default values for flex are 0 0 auto and not 0 1 auto.Source: Stackoverflow.com