16

My website is completely broken in IE11. The problem comes from flex: 1 1 0%;, which I use everywhere thanks to autoprefixer and postcss-flexbugs-fixes.

The site does work on IE when I change it to flex: 1 1 auto;, but then some behaviors change (e.g. one flexbox with two flex: 1 1 auto; children which do not take exactly the same space). Therefore this solution breaks my designs on other browsers (while making it a lot nicer - not broken - on IE11).

How do people manage to make their sites built with Flexbox work on IE11?

Edit: here is a pen which highlights the problem I am facing: https://codepen.io/Zephir77167/pen/GMjBrd (try it on Chrome and IE11).

Edit2: here is the code:

HTML:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

.item.flex-1-variation {
  flex: 1 1 auto;
}
adrienharnay
  • 795
  • 2
  • 9
  • 27
  • 1
    "IE 11 requires a unit to be added to the third argument, the flex-basis property" - https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx – Paulie_D Sep 22 '17 at 16:08
  • You can detect if the browser is IE11 and adjust CSS properties on that basis – sol Sep 22 '17 at 16:09
  • `@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .foo { /*IE styles go here */ } }` – I haz kode Sep 22 '17 at 16:14
  • Remove the percent sign `flex: 1 1 0` – Asons Sep 22 '17 at 16:14
  • See the third bullet point in the answer here: https://stackoverflow.com/q/32239549/3597276 – Michael Benjamin Sep 22 '17 at 16:15
  • 2
    @Michael_B Since I can't see _only one solution_ but a trial and error based on how the markup looks like, I think that answer/question suit great as a dupe – Asons Sep 22 '17 at 16:19
  • 1
    @LGSon, could be. Just posted as a comment so OP can review. – Michael Benjamin Sep 22 '17 at 16:22
  • 1
    I would agree, certainly so long as we don't have a demo of OP's code to show otherwise. Better to close as a likely-helpful dupe than to close as lacking an MCVE. – TylerH Sep 22 '17 at 16:24
  • https://stackoverflow.com/questions/28117862/ie-10-11-flex-basis-property-behaves-differently-than-webkit-browsers hope it helps – Rahul Dubey Sep 22 '17 at 16:26
  • @Paulie_D I have a unit, 0%. I also tried 0px, doesn't change anything. – adrienharnay Sep 22 '17 at 17:37
  • @LGSon Just tried, doesn't work (IE doesn't recognize the flex property if the third argument has no unit) – adrienharnay Sep 22 '17 at 17:38
  • @Michael_B I tried the 3 solutions, and still all produce the same output as 0% – adrienharnay Sep 22 '17 at 17:39
  • Sorry everyone, I should have included a pen. Here is one which highlights my issue: https://codepen.io/Zephir77167/pen/GMjBrd You will notice the difference between, say, Chrome, and IE11. – adrienharnay Sep 22 '17 at 17:52
  • 1
    @Zephir77167 Please include your code in the question itself, rather than linking to an external code sandbox like CodePen. It helps prevent link-rot if/when CodePen goes down and is also a requirement of the site for code-debugging questions. – TylerH Sep 22 '17 at 19:24
  • Nevermind, I included it in the question. Sorry about that. – adrienharnay Sep 22 '17 at 22:42
  • You can add `-ms-flex:1 1 auto;` after your standard rule to override it for IE. – Gabriele Petrioli Sep 22 '17 at 22:52
  • @GabyakaG.Petrioli Thanks but IE11 doesn't used prefixed properties (in inspector, `-ms-flex` is crossed, but not `flex`) – adrienharnay Sep 24 '17 at 16:24
  • @Zephir77167 Actually IE11 supports and will use the `-ms-flex` if it comes after the standard `flex` property. The problem most likely come from the autoprefixer and postcss-flexbugs-fixes and where they place their code. It is highly likely that their code is added even further down and so it will override the previously manually set `-ms-flex`. See https://codepen.io/anon/pen/ZXBrbx – Gabriele Petrioli Sep 24 '17 at 17:17
  • @GabyakaG.Petrioli Indeed, you are very right. Could you post this as the answer so I can select it? Thanks! – adrienharnay Sep 25 '17 at 08:53
  • 1
    see @LGSon's answer below. It has a cleaner approach to providing IE specific rules. – Gabriele Petrioli Sep 25 '17 at 17:33

2 Answers2

12

When it comes to IE11, you could target it explicit using this CSS rule:

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}

Stack snippet

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}
<div id="a" class="flex">
  <div id="b" class="item flex-1 IE-FlexAuto">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1 IE-FlexAuto">
    Heyheyheyheyho
  </div>
</div>

Here is a post with an answer of mine, which talks some more about this, and also provide some script solutions which might be helpful

Asons
  • 84,923
  • 12
  • 110
  • 165
3

I had a massive headache over this, rather than do a hack, set your flex-basis to auto, then if you have a container size, set the with to the same size, ie: 

@include breakpoint(m){
  flex: 0 48%;
  flex-basis: auto;
  width: 48%;
}
Who Me Dunno Mate
  • 474
  • 5
  • 15