Flexbox layout not working in Internet Explorer 10

Question

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

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

It should work for IE10 with a vendor prefix.

But this is not so!

UPDATE: And I just checked in the latest Firefox, it looks completely broken.

Why?

<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;"> <div style="width:50px;height:100%;"> <div class="fluid-column" style="height:80%;background-color:green;"> <div class="box" style="background-color:#ff99cc;height:25%;">1</div> <div class="box" style="background-color:#ff33cc;height:50%;">2</div> <div class="box" style="background-color:#ff66cc;height:25%;">3</div> </div> <div class="fix-column" style="height:20%;background-color:violet"> <div class="box" style="background-color:orange;height:50%;">Total</div> <div class="box" style="background-color:blue;height:50%;">Test</div> </div> </div> </div> body, html{ width:100%; height:100%; margin:0; padding:0; } div{ text-align:center; } .box { display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center; display:-ms-box;-ms-box-pack:center;-ms-box-align:center; display:-moz-box;-moz-box-pack:center;-moz-box-align:center; } 

Answer 1

You need to carefully read the notes about caniuse. Partial support refers to the support of one of the two old drafts, and they don’t indicate which browser supports this project. IE10 supports the March 2012 project, and this is the only thing known about it.

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

Answer 2

For Firefox, you need to specify the width of the elements that you want to see on the stack.

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

 #wrapper div {width:100%;}