IE10 Flexbox P元素非包装

Question

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

基本上在IE10的ap元素中,当"direction"是一行时,它的文本比它的父文件宽,会溢出,然后将任何其他兄弟姐妹推出容器.换行似乎在列模式下正常工作(您可以在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: 0 1 auto在成为弹性项目时应该已应用于它们.

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

Answer 2

对我来说,我需要在它开始为我工作之前这样做:

(为清晰起见使用类,为简洁起见,不包括前缀)

HTML:

<a class="flex">
    <span class="flex-child">Text that isn't wrapping in IE10</span>
</a>

CSS:

.flex {
    display: flex;
}

.flex-child {
    display: block;
    max-width: 100%;
    flex-shrink: 1;
}

请注意,您需要将自然内联子元素设置为内联(主要display:block或display:inline-block)以外的其他内容,以使修复工作.

感谢以前的答案让我大部分的方式虽然:)

更新:

如果将flex-direction设置为column,则上述技术不起作用.

我对flex-direction设置为column的建议是使用最小宽度的媒体查询在桌面上分配最大宽度.

.flex {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .flex-child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
        flex-shrink: 1;
    }
}

Answer 3

接受的答案对我不起作用.

我的问题(http://jsfiddle.net/Hoffmeyer/xmjs1rmq/)按照flexbugs https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-中的说明解决了.溢出的容器

组

max-width: 100%