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.

possible duplicate of [IE flexible box model not working](http://stackoverflow.com/questions/16487884/ie-flexible-box-model-not-working) — cimmanon, Aug 02 '13 at 14:38
Don't just apply randomly apply prefixes, it doesn't work due to the multiple Flexbox draft implementations: https://gist.github.com/cimmanon/727c9d558b374d27c5b6 — cimmanon, Aug 02 '13 at 14:41
Flexbox browser support: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Feb 15 '16 at 17:47
Please note that flex items should be display:block; in IE10. — rappongy, May 26 '17 at 05:17

Ennui · Accepted Answer · 2013-08-02T14:48:14.937

43

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/

edited Aug 02 '13 at 14:48

answered Aug 02 '13 at 14:32

Ennui

10,102
3
35
42

An older version is supported in IE10, take a look at note [1] in the link you posted. – JacobTheDev Aug 02 '13 at 14:33
Yes, there are some `-ms-` prefixed flexbox vendor properties, but as I understand they are based on an outdated version of the CSS3 flexbox specification (unless that MDN info is just outdated, which is possible). – Ennui Aug 02 '13 at 14:35
I don't care if it's an older spec, if it works, at least partially, then that's fine. I'm trying to adapt stuff from the CSS Tricks article you posted, will report back if it fixes it. – JacobTheDev Aug 02 '13 at 14:37
1

I was able to use the CSS tricks article you linked to to get this working, and actually I understand a bit more about what was wrong with my code now. – JacobTheDev Aug 02 '13 at 14:53
Surely it won't be much longer before Microsoft drops IE10 support altogether... I wonder how many of our clients use Windows Server 2012... https://www.xfive.co/blog/stop-supporting-ie10-ie9-ie8/ – Michael Scheper Nov 26 '17 at 16:21
I used styles exactly as they are written in CSS-Tricks article and they did not work on IE 10 – Islam Murtazaev Jun 14 '19 at 08:38

Simon East · Answer 2 · 2015-09-11T00:39:06.823

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;
    /**/
}

Correct - you **don't** need display: flex on children (``). It's **display: flex** on the containing element – to switch flexbox on – and **flex: …** on the children to specify the size etc. — William Turrell, Sep 10 '15 at 21:12

score 11 · Answer 3 · edited Apr 26 '16 at 09:01

11

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;)

edited Apr 26 '16 at 09:01

David Fregoli

3,377
1
19
40

answered Oct 22 '15 at 09:42

Ben

111
1
3

2

('first post' comment) link only answers are discouraged (because the link targets can disappear). It's fine to add links but a little bit of information (ideally enough to answer the question) is better practise. Thanks!. – Neil Thompson Oct 22 '15 at 09:51

CSS flexbox not working in IE10

3 Answers3

Linked

Related