Basically in IE10 a p element which has text wider than it's parent when the "direction" is a row, will overflow, and subsequently push any other siblings out of the container. The wrapping appears to work fine in column mode (and you can view the same jsfiddle in Chrome and see it behave as expected).
<div id="flex-one">
<p>Some extra long content (for the container) that correctly wraps!</p>
<aside>Content</aside>
</div>
<div id="flex-two">
<p>Some extra long content (for the container) that incorrectly wraps!</p>
<aside>Content</aside>
</div>
div {
width: 250px;
padding: 1em;
background: blue;
display: -webkit-flex;
display: -ms-flexbox;
margin-bottom: 1em;
}
#flex-one {
-webkit-flex-flow: column;
-ms-flex-direction: column;
}
#flex-two {
-webkit-flex-flow: row;
-ms-flex-direction: row;
}
p {
margin: 0;
padding: 0;
background: yellow;
}
aside {
background: red;
}
Any ideas on how to correct this behavior so that it doesn't overflow it's container? (without supplying a fixed with as this is used in a fluid layout).