Flexbugs: Incorrect free space calculation with flex items in IE 11

[GreLI]

If a flex contaner has an item bigger then flex-basis with non-zero flex-grow (e.g. flex: 1) and a free space to distribute (i.e. flex items is limited by property like max-width) and any justifying (or auto margin) different then flex-start, then it seems that in IE11 flex space which should be distributed between flex-grow items is also incorrectly adding up to free space, thus misplacing flex items.

Most reduced example:

.flex {
  display: flex;
  height: 25px;
  border: 1px solid #888;
  justify-content: center; /* could be "margin: auto"—doesn't matter */
}
.flex-item {
  flex: 1;
  max-width: 45%;
  background: lightblue;
}

which should be rendered like this:

is actually rendered like this in IE11:

As I said, bug presents when using properties like margin: auto or justify-content: space-around—anything that places elements different from flex-start.

The bug is present only in IE11 in any flex direction. IE10 doesn't have it, and it was fixed in Edge. It even doesn't show up in IE11 emulation mode in Edge.

There is no way to walkaround this bug, it can only be avoided by removing properties that causes it.

• E.g. one can use flex-shrink instead of flex-grow. However, this effectively means one needs to explicitly set property like min-width since no auto min size can be used in IE (Flexbug #1).
• The other option could be removing max-width to eliminate free space and align content inside flex items.
• At last, to align to the right or bottom there could be used reversed flex-direction with reordering.

[philipwalton]

Thanks for such a detailed, well-documented bug report! :)

Since there's no workaround I'm going to close this issue, but hopefully just being listed here will help someone else.

If you find a workaround, please reopen.

[tregusti]

Actually, I think I have found a workaround. I just had this problem and the same result can be achieved by using width and flex-shrink instead.

See http://codepen.io/tregusti/pen/apJVEd?editors=1100

It works in IE11, and other browsers.

Would you like a PR for it or do you prefer to handle it yourself @philipwalton?

PS. As a side note, why close the issue if there really is a bug? It is (was) unfortunate that there was no workaround, but it is still a bug that would be good to have documented among the other bugs in this excellent resource.

[philipwalton]

@tregusti this doesn't seem to solve the problem as it doesn't include flex-grow: 1 and it uses width instead of max-width.

[Denhell]

I had the same issue. In additional to max-width need to use width: 100%.

[MaxiSantos]

I had a similar issue and I found I had two parent containers with display=flex. I only left the immediate parent container with display=flex.

[ricardoorellana]

I add a width property with the same value as the max-width: 45%; on the child item that made the element center fine

.flex-item {
  flex: 1;
  width: 45%;
  max-width: 45%;
  background: lightblue;
}

[GreLI]

The bug appears when you have extra size comparing to flex-basis, i.e. you has flex growing. When you set width: 45% you effectevely set flex-basis: 45%, so you're getting rid from flex growing.

[philipwalton]

@GreLI, thinking about this a bit more, I think @tregusti's solution might work after all (sorry if I prematurely dismissed it).

As far as I cal tell, your "grow" solution (flex: 1 0 0% + max-width: 45%) aims to get a width between 0 and 45%. However, it seems like you could get that same range with a "shrink" solution (flex: 0 1 45% + min-width: 0) and that does work.

Does this solve your use-case? Here's a demo: https://codepen.io/anon/pen/ZaPjRe

[GreLI]

Yeah, it was the first option in my initial post:

E.g. one can use flex-shrink instead of flex-grow. However, this effectively means one needs to explicitly set property like min-width since no auto min size can be used in IE (Flexbug #1).

[philipwalton]

Sorry everyone for initially not seeing this. I added flexbug 17 to address this issue.

[GreLI]

It's not accurate, the bug doesn't appear in IE10. Only in IE11 (and not Edge or Edge-as-IE11). IIRC, it applies to vertical axis with flex-direction: column as well.

[philipwalton]

Ahh, thanks! I've updated the README.