Internet Explorer 10 does not apply flexbox on inline elements

Question

According to flexbox specs a span flex item (children of a flex container) should be converted into display:block. Internet Explorer 10 does not apply this transfor

Answer 1

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

Answer 2

did you try this property?

display:-ms-inline-flexbox; (for an inline flexbox container).