How to make flex-basis work in IE11 - css

Question

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

Answer 1

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

Answer 2

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