New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect free space calculation with flex items in IE 11 #128

Closed
GreLI opened this Issue Feb 13, 2016 · 12 comments

Comments

Projects
None yet
6 participants
@GreLI

GreLI commented Feb 13, 2016

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:
center-should
is actually rendered like this in IE11:
center-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

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Mar 21, 2016

Owner

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.

Owner

philipwalton commented Mar 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tregusti

tregusti Jan 20, 2017

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.

tregusti commented Jan 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Jun 22, 2017

Owner

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

Owner

philipwalton commented Jun 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Denhell

Denhell Sep 11, 2017

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

Denhell commented Sep 11, 2017

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

@MaxiSantos

This comment has been minimized.

Show comment
Hide comment
@MaxiSantos

MaxiSantos Oct 11, 2017

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.

MaxiSantos commented Oct 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ricardoorellana

ricardoorellana Oct 26, 2017

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;
}

ricardoorellana commented Oct 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@GreLI

GreLI Oct 27, 2017

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.

GreLI commented Oct 27, 2017

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

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Dec 4, 2017

Owner

@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

Owner

philipwalton commented Dec 4, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@GreLI

GreLI Dec 5, 2017

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

GreLI commented Dec 5, 2017

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

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Dec 6, 2017

Owner

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

Owner

philipwalton commented Dec 6, 2017

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

@GreLI

This comment has been minimized.

Show comment
Hide comment
@GreLI

GreLI Dec 6, 2017

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.

GreLI commented Dec 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Dec 7, 2017

Owner

Ahh, thanks! I've updated the README.

Owner

philipwalton commented Dec 7, 2017

Ahh, thanks! I've updated the README.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment