Flexbugs: IE 11 bug with nested flex container and flex-basis:auto on parent flex item

[zomigi]

If I have a flex item with flex-basis:auto and flex-shrink:1, and that flex item has a descendant box with display:flex or display:inline-flex set on it, then IE 11 will stop respecting flex-shrink:1 on the ancestor. If I change it from flex-basis:auto to any other value, it will correctly shrink. If I remove the nested flex container, it will correctly shrink. Demo at http://codepen.io/zomigi/pen/qdMemx.

I haven't discovered any workaround for this yet.

[philipwalton]

I think what's going on here is a circular sizing issue. It's definitely a bug, but I think it can be commonly worked around by adding a definite size to either the child or the parent, so they're not dependent on each other.

In the flex layout algorithm, flex-basis is used as a starting point for all future calculations. In the case of auto, it will fall back to the main size property (if defined) or the content size (if no main size properties are set). That means in situations where the content is larger than the container, the following two declarations are basically equivalent: flex: 0 1 auto and flex: 0 1 100% (assuming no main size property is set).

Substituting the former for that latter in your pen fixes the first and third examples, and in the case of the second one, you can continue to use flex: 0 1 auto.

Obviously this isn't as flexible, and requires knowledge of what the content is likely going to be, but I think in many cases you _do_ know whether the content is likely to be larger or smaller than the design's initial allocation.

Anyway, hopefully that helps someone.

[stefsullrew]

@zomigi @philipwalton I had filed issue #63 a couple months ago. Now, I'm trying to write about the fix. (WHY, oh WHY did I not write immediately after fighting with it for a week!?)

Zoe, I thought I'd share my fix with you here since I forked your CodePen and it seems to work like I THINK you expect. http://codepen.io/stefsullrew/pen/Pqggym?editors=110

What I found is that using:
flex: 1 1 0%; min-width: 0;

... seems to fix it. We have to use that class on any flex column that contains another flex container that needs truncation in it (because it was breaking out). But it also seems to fix your text breaking out as well.

We're also using Philip's flexbox media object which I had to update to also use the min-width:0 in the .media__body. I've seen no ill effects from that thus far. And I can truncate inside it.

I should update my closed issue with this info in case it helps someone else.

[stefsullrew]

OH, and thanks for helping me get my thoughts back together. :) I updated my fix for #63 more fully in that issue.

[Dr-Head]

Just a slight note on the matter.

Although this does indeed work as a work around in IE11. It breaks the original intent in Chrome and Safari.