Flexbox layout does not work in Internet Explorer 10

Question

http://jsfiddle.net/J8rL7/87/

According to http://caniuse.com/#feat=flexbox

It should work for IE10 with vendor-prefix.

But it does not!

UPDA

Answer 1

For Firefox , you need to give a width to the elements you want to see stacking.

http://jsfiddle.net/J8rL7/101/

#wrapper div {width:100%;}

Answer 2

You need to read the notes very closely on caniuse. "Partial support" refers to supporting one of two older drafts, and they don't make a note of which browser supports which draft. IE10 supports the March 2012 draft, and it's the only one that's known to do so.

http://codepen.io/cimmanon/pen/ApHEy

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* fix for old FF */
  width: 100%;
}