IE11, flexbox, min-height and align-items

Table of Contents

1 The problem

I jumped into an issue with IE11 today, a question mark icon does not display right. On Chrome, it's fine, but on IE, it's being pushed down a bit. Like this:


2 Analysis

At first, it seems like an issue is coming from the icon. But after inspecting, it doesn't have any specific style that would affects the positioning. Trying to fix the problem by applying margin-top to the icon helps, but it introduce a new issue on Chrome.

So, there's nothing can be done with the question mark icon. It's time to move on to the near by elements, in this case, the black box.

The style of black box is something like this:

display: flex;
min-height: 28px;
align-items: center;

It's still doesn't look like anything would causes the problem here. But let's try "debugging" the problem with the infamous-method-which-will-works-most-of-the-time: removing each attribute and see how it changes.

Surprisingly, after removing min-height, the question mark jumped back to its position.

What the f*ck?

3 Diagnosis and solution

If removing min-height works, so there must be some min-height bug related to flexbox. The best I can do at this point is, ask my friend, Google: "Hey Google, what the fuck is going on with IE11 and flexbox when it has min-height?".

Apparently, it's not that long sentence I'm using, but this: "IE11 flexbox min-height".

It doesn't took me long to find out, there's actually a bug in IE, so, if min-height is present, the element's content cannot be vertically center align, and that's what align-items: center do!

Someone already found a workaround for this, by replacing min-height with height. In case min-height is required, you can set it for the container, and set the poor element's height to something smaller.

4 Planning and implementing the solution

So, before doing anything, I checked the design with product team, turned out, the box I'm working on never has its height changed, so I'm can replace the min-height above with the height. Whoever implemented this was too carefully to make it min-height instead of height, he probably think it must be good for responsive.

To make sure this is a root cause of the problem, I'm gonna need to make sure it won't introduce any other issues, it's better to test it on as many browsers as possible after the fix.

So this is the final result:

display: flex;
height: 28px;
align-items: center;

Date: 2019-01-18 Fri 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:41