IE 10-11 vs Chrome Flexbox

the flex basis property has some weird behavior in IE when you change it from 0 to auto;

by sgardn04

HTML

<h4>Media body with flex-basis set to auto</h4>
<div class="Media">
    <div class="Media-figure">Figure</div>
    <div class="Media-body">Here's a little content</div>
</div>

<div class="Media">
    <div class="Media-figure">Figure</div>
    <div class="Media-body">Here's more content than should be able to comforatbly fit in this box. Does it wrap? Or just grow and push content around?</div>
</div>



<h4>Media body with flex-basis set to 0</h4>
<div class="Media">
    <div class="Media-figure">Figure</div>
    <div class="Media-body--0">Here's a little content</div>
</div>

<div class="Media">
    <div class="Media-figure">Figure</div>
    <div class="Media-body--0">Here's more content than should be able to comforatbly fit in this box. Does it wrap? Or just grow and push content around?</div>
</div>

CSS

.Media {
     display: flex;
     display: -webkit-flex;
     display: -ms-flexbox;
}

/* These are the css properties that .Media-figure effectively has without us having to specify them:     

            flex: 0 1 auto; 

But, we'd rather not have the Media figure shrink at all if we run out of space. I'm assuming here that the Media figure is something with definite size, and therefore should be given dimensions based off it's initial size, and NOT shrink if we have too little space. Instead, let's use:

            flex: 0 0 auto;

If you want to see what happens otherwise, comment out the CSS for .Media-figure and 
*/

.Media-figure {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.Media-body {
    margin: 0 1em;
    border: 1px solid red;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.Media-body--0 {
    margin: 0 1em;
    border: 1px solid red;
    
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
}