title: How to make flex-basis work in IE11
body: <p>My website is completely broken in IE11. The problem comes from <code>flex: 1 1 0%;</code>, which I use everywhere thanks to <a href="https://github.com/postcss/autoprefixer" rel="noreferrer">autoprefixer</a> and <a href="https://github.com/luisrudge/postcss-flexbugs-fixes" rel="noreferrer">postcss-flexbugs-fixes</a>. </p>
  
  <p>The site does work on IE when I change it to <code>flex: 1 1 auto;</code>, but then some behaviors change (e.g. one flexbox with two <code>flex: 1 1 auto;</code> 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).</p>
  
  <p>How do people manage to make their sites built with Flexbox work on IE11?</p>
  
  <p>Edit: here is a pen which highlights the problem I am facing: <a href="https://codepen.io/Zephir77167/pen/GMjBrd" rel="noreferrer">https://codepen.io/Zephir77167/pen/GMjBrd</a> (try it on Chrome and IE11).</p>
  
  <p>Edit2: here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="a" class="flex"&gt;
    &lt;div id="b" class="item flex-1"&gt;
      Hey
    &lt;/div&gt;
    &lt;div id="c" class="item flex-0"&gt;
      Ho
    &lt;/div&gt;
    &lt;div id="d" class="item flex-1"&gt;
      Heyheyheyheyho
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="a" class="flex"&gt;
    &lt;div id="b" class="item flex-1-variation"&gt;
      Hey
    &lt;/div&gt;
    &lt;div id="c" class="item flex-0"&gt;
      Ho
    &lt;/div&gt;
    &lt;div id="d" class="item flex-1-variation"&gt;
      Heyheyheyheyho
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    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;
  }
  </code></pre>