Flexbox IE11 bugs

I recently started experimenting with flexbox. On this blog. Without enough testing. Or at least, without the kind of testing I would do for a work project. It’s a live experiment! Here are the bugs I ran into.

Working from CSS tricks excellent Flexbox guide, I got the main layout together pretty quickly. It worked across the most recent versions of Firefox/Chrome/Safari.

However, when I opened it in IE11 things were funky, with two main bugs.

1. Vertical centering with min-height

A known bug, the “flex items” in the header area were aligned to the top of the page, instead of halfway down the header.

It seems IE needs an explicit height set on the flex container, whereas I had used min-height. Not using a set height it one of the traditional practices of accessibility, as then people expanding text don’t get it cut off.

With a responsive layout you have reasonable control of zoom, so fixing the height is not the end of the world, I can live with that.

The second bug is trickier, and I can’t find any reports of it yet.

2. Horizontal scrolling with flex grow

The header area of the page expands to the right, creating horizontal scrolling, but only at certain widths.

The widths aspect is unpredictable, it would expand to the right at around 1000px wide, come back at 1050px, and then expand again above 1,100px.

I cut it down to a simple test-case and found that you need three things to get this bug. The triggering code is:

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
    flex-grow: 1;
    max-width: 750px;
}

You need:

• a flex-container with a justify-content value of space-around or flex-end, and
• a flex-item with flex-grow, and
• a (triggered) max-width value

With those triggers in place the content zooms off the right of the screen.

The test-case shows three states at different browser widths.

At a small size the explicit width of the flex-item is fine:

When flex-grow is enabled and the max-width is not triggered (i.e. the flex item is less wide than the max-width value) it simply fills the container, as expected:

With all the triggers in place, the content heads off the screen to the right:

For the purpose of working around this I will either apply the max-width to a child element, or set an explicit width when the max-width would apply.

Reported to IE here, it is apparently fixed in the latest builds, hopefully that will get pushed out soon.