internet-explorer - IE10 Flexbox P元素不包装

Question

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

基本上，在IE10中，当“方向”为一行时，其p元素的文本宽于其父元素的p元素将溢出，随后将其他同级对象推出容器。包装在列模式下似乎可以正常工作(并且您可以在Chrome中查看相同的jsfiddle并看到其表现正常)。

<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;
}

关于如何纠正此行为以使其不会溢出容器的任何想法？ (不提供固定件，因为它在流体布局中使用)。

Answer 1

这对我来说没有任何意义，但是在段落中添加-ms-flex: 0 1 auto或-ms-flex: 1 1 auto并放在一边可以在IE10中更正它。默认情况下，当元素成为 flex 项目时，应该将flex: 0 1 auto应用于它们。

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