Flexbugs: IE11: Nested flex container makes trouble if no min-width is set

[Martin-Wegner]

In IE11 the following example does not work correctly if you shrink the window width:
http://codepen.io/anon/pen/mEjYYY

In Chrome, Firefox and Edge the behaviour is correct.

Another example:
http://codepen.io/anon/pen/AXgGkY

Correct:

IE11:

[Martin-Wegner]

A min-width of 1 px seems to solve the problem. Very odd...
http://codepen.io/anon/pen/RRBXwG
http://codepen.io/anon/pen/BzPXBd

[philipwalton]

In your case you're using the default flex shrink and basis values. If you set them (along with optionally a min-width) everything seems to handle fine:
http://codepen.io/anon/pen/NALrrz

I know this is probably a reduced test case from a larger issue, so I think I'd need more context as to how this came up and what specifically the problem is.

[Martin-Wegner]

Your example is not what I want... Please see the second example in my first post.

Correct:

IE11:

[philipwalton]

My point was that flex items with text in them will behave differently from flex items with fixed-width things in them (like in your most recent screenshot). I was also making sure you were aware that you weren't setting the flex shrink/basis properties.

While I agree that there's conflicting behavior going on here, it's not clear how to generalize these differences into a clear "bug" with a clear workaround. Without that, I can't add it to the list of flexbugs.

[Martin-Wegner]

My example with the colored boxes has only containers with a fixed size (200px width and 20px height). And the workaround is "min-width: 1px;".

[philipwalton]

If someone has this exact problem, then sure min-width: 1px could be a workaround. But recommending min-width: 1px for any nested flex box layout is obviously too broad a recommendation.

I can't add this to the flexbugs list unless we can identify a generic set of situations in which this bug occurs and where the min-width: 1px fix always works.

[grahaml]

2.5 years later and min-width: 1px or flex: 1 1 0% still works.