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

User · Accepted Answer

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

User · Answer

IE10 has uses the old syntax  So   display  -ms-flexbox     will work on IE10    display  flex     is new syntax  will not work on IE10      see css-tricks com snippets css a-guide-to-flexbox       tweener  means an odd unofficial syntax from  2012   e g  display  flexbox

User · Answer

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          lt flex-grow gt   lt flex-shrink gt   lt flex-basis gt         -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

[css] CSS flexbox not working in IE10

Examples related to css

Examples related to internet-explorer

Examples related to flexbox