IE11 flexbox preventing text wrapping?

I came across a similar problem and found with IE11 you need to use the syntax:

flex: 1 1 auto;

rather than:

flex: 1;

Thanks to this Github commit: https://github.com/philipwalton/solved-by-flexbox/pull/8/files

I was able to get the text to properly wrap in IE10 & 11 by explicitly setting a width or max-width on the display: flex element and the child that needs to have its text wrapped.

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

Here's a Codepen demo.

As far as I can tell, IE's flexbox implementation is just broken. That's the long and short answer to this question. The text should be wrapping, but it isn't. It does in Firefox and Chrome.

UPDATE:

IE11's flexbox implementation was indeed broken. This now renders properly in Edge.

Found this easy fix in the Flexbox bugs repository:

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}

Flexbox bug repository