How to make flex-basis work in IE11

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

  • Instead of using prefixes I want to ask site visitors to upgrade their browser

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%;
}