CSS flexbox not working in IE10

Question

In IE10, this code isn't working correctly:

.flexbox form {     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;     -webkit-flex-direction: row;     -moz-flex-direction: row;     -ms-flex-direction: row;     -o-flex-direction: row;     flex-direction: row; }  .flexbox form input[type=submit] {     width: 31px; }  .flexbox form input[type=text] {     width: auto;     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;     -webkit-flex: auto 1;     -moz-flex: auto 1;     -ms-flex: auto 1;     -o-flex: auto 1;     flex: auto 1; } 

What should happen is that input[type=submit] should be 31px wide, with input[type=text] taking up the rest of the available space within form. What happens is input[type=text] just defaults to 263px for some reason.

This works fine in Chrome and Firefox.

Answer 1

Flex layout modes are not (fully) natively supported in IE yet. IE10 implements the "tween" version of the spec which is not fully recent, but still works.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

This CSS-Tricks article has some advice on cross-browser use of flexbox (including IE): http://css-tricks.com/using-flexbox/

edit: after a bit more research, IE10 flexbox layout mode implemented current to the March 2012 W3C draft spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

The most current draft is a year or so more recent: http://dev.w3.org/csswg/css-flexbox/

Answer 2

As Ennui mentioned, IE 10 supports the -ms prefixed version of Flexbox (IE 11 supports it unprefixed). The errors I can see in your code are:

• You should have display: -ms-flexbox instead of display: -ms-flex
• I think you should specify all 3 flex values, like flex: 0 1 auto to avoid ambiguity

So the final updated code is...

.flexbox form {     display: -webkit-flex;     display: -moz-flex;     display: -ms-flexbox;     display: -o-flex;     display: flex;      /* Direction defaults to 'row', so not really necessary to specify */     -webkit-flex-direction: row;     -moz-flex-direction: row;     -ms-flex-direction: row;     -o-flex-direction: row;     flex-direction: row; }  .flexbox form input[type=submit] {     width: 31px; }  .flexbox form input[type=text] {     width: auto;      /* Flex should have 3 values which is shorthand for         <flex-grow> <flex-shrink> <flex-basis> */     -webkit-flex: 1 1 auto;     -moz-flex: 1 1 auto;     -ms-flex: 1 1 auto;     -o-flex: 1 1 auto;     flex: 1 1 auto;      /* I don't think you need 'display: flex' on child elements * /     display: -webkit-flex;     display: -moz-flex;     display: -ms-flex;     display: -o-flex;     display: flex;     /**/ }