IE10 Flexbox P element non-wrapping

Question

http://jsfiddle.net/pvJRK/2/

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).

Answer 1

It doesn't make any sense to me, but adding -ms-flex: 0 1 auto or -ms-flex: 1 1 auto to the paragraph and aside corrects it in IE10. By default, elements are supposed to have flex: 0 1 auto applied to them when they become flex items.

http://jsfiddle.net/pvJRK/3/