The flex 10-based property of IE 10-11 behaves differently than webkit browsers

Question

I am trying to use a Media Object consisting of Media-bodyand Media-figure. HTML and classes follow this form (order should not matter).

.Media
   .Media-figure
   .Media-body

Simple CSS (no prefixes):

.Media { 
   display: flex 
}

.Media-figure {
   flex: 0 0 auto;

   /* same as...
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   */
}

.Media-body {
   flex: 1 1 0;

   /* same as...
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0;
   */
}

Note that I am changing the Media-figureflex-shrink coefficient to 0 (as opposed to the link I posted). I assume that Media-figurethis is a fixed size, and we do not want to reduce it if we have too little space.

flex-basis: 0 Media-body , , , flex-grow: 1. IE10-11 flex-basis: 0 Media-body , .

http://jsfiddle.net/sgardn04/3enpp4wg/

(: , . IE10-11!)

- Media-body { flex-basis: auto }, , , . , IE , webkit. , IE? , webkit , ? .

EDIT: , , -, , flex-basis , (flex-basis: 0 vs flex-basis: auto).

Answer 1

​​ flex-basis. ( 0) IE:

MDN flex :

0 . 0%, .