Best IT Recipes

Flexbox and Internet Explorer 11 (display: flex in <html>?)

I plan to move away from smooth layouts and use CSS flexbox for future projects. I was glad to see that all major browsers in their current versions seem to support (anyway) flexbox.

I headed to "Solved 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 made it work by adding display:flex to <html> and width:100% to <body>

So my first question is: can anyone explain this logic to me? I just messed around and it worked, but I don’t quite understand why it worked ...

Then there is the “Media Object” example, which works in all browsers except, as you may have guessed, Internet Explorer. I also fiddled with this, but to no avail.

So my second question is: is there a “clean” opportunity to make the “Media Object” example work in Internet Explorer?

+90
html css cross-browser html5 flexbox
Feb 06 '14 at 10:33
source share
5 answers

According to http://caniuse.com/#feat=flexbox :

"The default values ​​for IE10 and IE11 for flex are 0 0 auto , not 0 1 auto , according to the project specification as of September 2013."

So, in simple words, if somewhere in your CSS you have something like this: flex:1 , this does not translate the same in all browsers. Try changing it to 1 0 0 , and I believe that you will immediately see that it works -kinda-.

The problem is that this solution is likely to ruin firefox, but then you can use some hacks to target only Mozilla and change it:

 @-moz-document url-prefix() { #flexible-content{ flex: 1; } }

Since flexbox is a W3C candidate, not an official one, browsers tend to give different results, but I think this will change in the near future.

If anyone has a better answer, I would like to know!

+134
Apr 05 '14 at 15:54 on
source share

Use a different flex container to fix the min-height problem 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.

  • Do not use the flexbox layout directly on the body , because these are plugins inserted through jQuery (autocomplete, pop-up, etc.).
  • Do not use height:100% or height:100vh on your container, the footer will be inserted at the bottom of the window and will not adapt to long content.
  • Use flex-grow:1 rather than flex:1 cause the default values ​​for IE10 and IE11 for flex : 0 0 auto , not 0 1 auto .
+41
Sep 03 '16 at 9:09
source share

You just need flex:1 ; This will fix the problem for IE11. I am the second Odyssey. Additionally assign 100% html height, 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/

+33
Aug 03 '15 at 11:28
source share

Here is an example of using flex, which also works in Internet Explorer 11 and Chrome.

HTML

 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>Flex Test</title> <style> html, body { margin: 0px; padding: 0px; height: 100vh; } .main { display: -webkit-flex; display: flex; -ms-flex-direction: row; flex-direction: row; align-items: stretch; min-height: 100vh; } .main::after { content: ''; height: 100vh; width: 0; overflow: hidden; visibility: hidden; float: left; } .left { width: 200px; background: #F0F0F0; flex-shrink: 0; } .right { flex-grow: 1; background: yellow; } </style> </head> <body> <div class="main"> <div class="left"> <div style="height: 300px;"> </div> </div> <div class="right"> <div style="height: 1000px;"> test test test </div> </div> </div> </body> </html>
0
Jul 04 '17 at 8:20
source share

Sometimes it's as simple as adding: '-ms-' before the Like -ms-flex-flow style: line break; make it work too.

0
Jun 19 '19 at 13:31 on
source share


More articles:


All Articles