CSS flexbox not working in IE10
css, flexbox, internet-explorer
Solution
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/
Problem
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.