Why Doesn't Flexbox Work in IE10?

Flexbox layout is invalid in IE10: Reason exploration

In IE10, the following code does not work 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;
}

Problem phenomenon: The width of input[type=submit] should be 31px, and input[type=text] should occupy the remaining available space in the form. However, what happens is that the width of input[type=text] inexplicably defaults to 263px.

The code runs fine in Chrome and Firefox.

Explanation:

In IE, Flexbox layout mode is not yet (fully) natively supported. IE10 implements a "tween" version of the specification, which is not entirely up to date, but still works.

This article recommends using the following tips provided by CSS-Tricks when using Flexbox layout in IE:

• Use the Vendor prefix
• to set an explicit flex-direction ( Even if it is the default value)
• Avoid using obsolete properties (such as -webkit-box-flex)

It should be noted that IE10 Flexbox layout mode is based on March 2012 W3C draft specification, and the latest draft has been updated for about a year.

The above is the detailed content of Why Doesn't Flexbox Work in IE10?. For more information, please follow other related articles on the PHP Chinese website!