Flexbox Layout Does Not Work in Internet Explorer 10

Flexbox layout does not work in Internet Explorer 10

You need to read the notes very closely on caniuse. "Partial support" refers to supporting one of two older drafts, and they don't make a note of which browser supports which draft. IE10 supports the March 2012 draft, and it's the only one that's known to do so.

http://codepen.io/cimmanon/pen/ApHEy

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* fix for old FF */
  width: 100%;
}

display: flex not working on Internet Explorer

Internet Explorer doesn't fully support Flexbox due to:

Partial support is due to large amount of bugs present (see known
issues).

Sample Image
_{Screenshot and infos taken from caniuse.com}

Notes

Internet Explorer before 10 doesn't support Flexbox, while IE 11 only supports the 2012 syntax.

Known issues

IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.
IE 11 does not vertically align items correctly when min-height is used. See bug.

Workarounds

Flexbugs is a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.

Minimum content sizing of flex items not honored
Column flex items set to align-items: center overflow their container
min-height on a flex container won't apply to its flex items
flex shorthand declarations with unitless flex-basis values are ignored
Column flex items don't always preserve intrinsic aspect ratios
The default flex value has changed
flex-basis doesn't account for box-sizing: border-box
flex-basis doesn't support calc()
Some HTML elements can't be flex containers
align-items: baseline doesn't work with nested flex containers
Min and max size declarations are ignored when wrapping flex items
Inline elements are not treated as flex-items
Importance is ignored on flex-basis when using flex shorthand
Shrink-to-fit containers with flex-flow: column wrap do not contain their items
Column flex items ignore margin: auto on the cross axis
flex-basis cannot be animated
Flex items are not correctly justified when max-width is used

CSS flexbox not working in IE10

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/

Flexbox not working in Internet Explorer 11

According to Flexbugs:

In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

Here are a couple of workarounds:

1. Always fill the viewport + scrollable <aside> and <section>:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

header,
footer {
  background: #7092bf;
}

main {
  min-height: 0; /* added 2021*/
  flex: 1;
  display: flex;
}

aside, section {
  overflow: auto;
}

aside {
  flex: 0 0 150px;
  background: #3e48cc;
}

section {
  flex: 1;
  background: #9ad9ea;
}

<header>
  <p>header</p>
</header>

<main>
  <aside>
    <p>aside</p>
  </aside>
  <section>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </section>
</main>

<footer>
  <p>footer</p>
</footer>

Bug in Internet Explorer 10 with flexbox in table

looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW

DISCLAIMER: only tested via the devellopper tools and not a real IE10

.a{

  display: flex; 

  width:50%;

  background:red;

}

span {

  display:inline-block;

  max-width:100%;

}

        <div style="width: 50%; background-color: grey;">

            <div class="a" >

                <span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>

            </div>

        </div>

Internet Explorer 10 does not apply flexbox on inline elements

This is just because the (working draft) flexbox spec changed, after IE10 was released.

Here's the relevant chunk of spec text from the CSS Flexbox working draft, as it existed when IE10 was released towards the end of 2012:

The flex layout algorithm operates on boxes generated by flex items. Each of the following becomes a flex item:
[...]
4. An anonymous block wrapped around a contiguous run of non-replaced inline child elements.

Source: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items

A span is a "non-replaced inline child element". So IE10 wraps the span (and any adjacent inline content) in an anonymous block (matching the old spec) instead of converting it to a block (per the new spec).

I suspect Microsoft didn't want to change this functionality after release, to avoid breaking content that was already coded to expect a particular behavior in IE10.

So if you want to write flexbox content that works both in IE10 and more recent browser-versions, it's probably best not to depend on this particular behavior. (Be explicit; change these spans to divs, or give them display:block, since you know they're going to be converted to blocks in newer browsers anyway.)

Text doesn't wrap in IE 10 when using flexbox

The source of the problem is the main element in your HTML.

This element was introduced in HTML5 and is not recognized by IE10.

Since main is not supported by IE10 – meaning it doesn't exist in the browser's default style sheet – the element assumes initial properties as defined in the spec.

As a result, main in your layout is display: inline. (Check dev tools and you'll find it has no width and is not wrapping anything. It's just a little spec.)

With the following adjustment, main should work in IE10, enabling the text to wrap:

main {
   display: block;
}

Note that the main element is unique because other HTML5 elements such as article, section, header and figcaption (which are also in your code) work fine in IE10 (and even IE9). For whatever reason, IE left main out in the cold. See the caniuse link below for more details.

More info:

Default settings of unrecognized HTML elements
<main> element not working in Internet Explorer 11
9.2.4 The display property
main element browser support at caniuse.com

Flexbox in IE10

For IE10 , span should be displayed as inline-block to trigger layout somehow .

Test here if it fixes it : http://codepen.io/gc-nomade/pen/lhsEt

Flexbox Layout Does Not Work in Internet Explorer 10