Flexbugs: Internet Explorer does not properly size nested flex children

[jakezatecky]

In Internet Explorer, if a flex container has a child element that contains another flex container, this nested flex container's items do not attempt to size properly.

For example, if the child of the nested flex container is a paragraph element, then the paragraph text will not even attempt to wrap -- it will continue for as much text as there is. Below is an example of the markup necessary to notice this problem, assuming .flex { display: flex }.

<div class="outer flex">
    <div class="left">
        ...
    </div>
    <div class="right">
        <div class="some-other-content">...</div>
        <div class="inner flex">
            <p>...</p>
        </div>
    </div>
</div>

In the following example, the uppermost flex container has max-width: 400px. Despite this, the nested flex container's paragraph element stretches to 661 pixels on Internet Explorer 11. On Chrome and Firefox, the paragraph wraps properly (but on Chrome, we can see a separate issue as described in Issue #48).

If the nested flex container is an immediate child of the parent flex container, Internet Explorer appears to work properly.

http://jsfiddle.net/n6dtynq4/2/

However, this may not be an appropriate solution, as it we may not desire an immediate flex container within a flex container.

[jakezatecky]

This actually turned out to be a variation of Flexbug 5, but it has nothing to do with flex-direction: column, which led me to initially ignore that Flexbug.

Making the flex's container have width: 100% solved the issue.