Text not wrapping in IE when container has flex-flow:column - html

Question

I have the following code in my CSS:
#media screen and (max-width:600px) {
...
.container {
display: flex;
flex-flow: column;
max-width: 100%;
}
.container p {
display: block;
max-width: 100%;
}
...
}
This renders as expected in Chrome and Firefox, but in IE, the text fails to wrap, and each paragraph is rendered as a single line (which typically exceeds the width of the screen). There's a variety of solutions which address this situation when 'flex-flow' is not set to 'column'. Is there a way to fix the word-wrapping issue, under the condition that 'flex-flow' is set to 'column', and without setting a fixed width for either the container or child element?
Update:
The issue appears to pertain to the width of the element outside of the container. Here's a fiddle that illustrates what's going on.
HTML:
<div class='wrapper'>
<div class='container'>
<p>
Lorem ipsum...
</p>
<br>
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
</div>
CSS:
.container {
display: flex;
flex-flow: column;
}
.container p {
max-width: 100%;
}
.wrapper {
clear: both;
float: left;
max-width: 1000px;
margin-top: 20px;
}
In the above example, the text will wrap in Chrome and Firefox, but will not wrap in IE. If, for example, the value of 'display' is changed to 'table', the paragraph text will wrap as expected in all browsers.

Answer 1

IE 10 and 11, which support flexbox, have many related bugs nonetheless.
In this particular case, IE is not recognizing the inherent width or display value of .container.
Here's a fix:
.wrapper {
clear: both;
float: left;
max-width: 1000px;
margin-top: 20px;
display: flex; /* NEW */
}
.container {
display: flex;
flex-flow: column;
width: 100%; /* NEW */
border: 1px solid red;
}
.container p {
max-width: 100%;
border: 1px dashed black;
}
<div class='wrapper'>
<div class='container'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
Suspendisse placerat elit non augue suscipit pretium.
</p>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
Suspendisse placerat elit non augue suscipit pretium.
</p>
</div>
</div>
jsFiddle

Answer 2

IE need the width to be set, and in your case on the wrapper.
Updated fiddle
.wrapper {
clear: both;
float: left;
width: 100%; /* added */
max-width: 1000px;
margin-top: 20px;
}