IE10 Flexbox P元素无包装 [英] IE10 Flexbox P element non-wrapping

问题描述

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

基本上在IE10的ap元素中，当direction是一行时，其文本宽于父元素，会溢出，并随后将其他所有的兄弟元素从容器中推出。包装似乎在列模式下工作正常（您可以在Chrome浏览器中查看相同的jsfiddle并查看其行为如预期）。 >< div id =flex-one>
< p>一些正确包装的超长内容（对于容器）！< / p>
<旁边>内容< /预计>
< / div>

< div id =flex-two>
< p>一些超长内容（容器）不正确的包装！< / p>
<旁边>内容< /预计>
< / div>

div {
width：250px;
填充：1em;
背景：蓝色;
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：red;





$ b

有关如何纠正这种行为，使其不会溢出容器？ （没有提供一个固定的，因为这是用流体布局）。

解决方案

这对我没有任何意义，但在段落中添加 -ms-flex：0 1 auto 或 -ms-flex：1 1 auto 除了在IE10中纠正它。默认情况下，当元素变成弹性项目时，元素应该被应用到 flex：0 1 auto 。

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

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

解决方案

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/

这篇关于IE10 Flexbox P元素无包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！