IE10 and "Tweener" Flexbox Frustrations

We’ve recently begun to use flexbox in our production code, and the experience has mostly been great. We use Modernizr to feature-detect flexbox support and use it where available. In an interesting twist, Modernizr 2.x reports IE10 as supporting flexbox, which is only somewhat true. As you may know, IE10 has an unusual implementation of flexbox, sometimes called the “tweener” or 2011 syntax. Basically, IE10 implements a prefixed version of a working draft of flexbox that was later significantly modified before being adopted as the current flexbox spec. As a result, IE10’s implementation is pretty unique and (predictably) buggy.

Fortunately for us, we use Bourbon, which provides us with a lovely set of mixins that includes full compatibility with the tweener version of flexbox. Using flexbox is (theoretically) as simple as @include flex(1 1 auto). Unfortunately, reality and theory don’t always match up, and it quickly became apparent that something was going wrong.

We have a list of items where the contents of each <li> include a span, a label, and a div. The contents of the label are dynamic, and we’re using flexbox to expand and contract it to fill the available room as necessary. When the content of the label is too long for the available space, we’d like it to get truncated with an ellipsis (”…”).

<ul>
    <li class="first-item">
        <span>A</span> <label>This is a long label</label>
        <div>1234567</div>
    </li>
</ul>

.first-item {
    @include display('flex');
    width: 100px;
    label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        @include flex(1 1 auto);
    }
}

In modern browsers, this looks about how you would expect:

In IE10, this does not work how you would expect:

After fruitlessly browsing through Microsoft’s IE10 flexbox documentation as well as the first couple pages of a few different Google searches, I decided to open a Codepen to try to tinker my way to a solution. The first thing I noticed was that, as expected, the label was not growing or shrinking at all. I tried a few different syntaxes of flexbox just to make sure it wasn’t Bourbon being dumb, but the breakthrough came when I put the flex styles on the <div>. At that point, it immediately expanded to fill the available space, and that’s when the lightbulb came on.

The key to the puzzle is that, unlike a modern flexbox implementation, IE10’s tweener flexbox won’t flex inline elements, including <span> and <label>. To make these elements flex in IE10, you can simply include display: inline-block. In our case, we didn’t even have to put that behind a version check, and the problem was solved.

There’s a live Codepen demo here. Both versions should work in a modern browser, while only the second <li> will be formatted correctly in IE10.

See the Pen GpNPvP by Will Stamper (@epmatsw) on CodePen.