Question

基本上在IE10中，当“方向”是一行时，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: 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-overflow-their-container

中的描述得到解决

集

max-width: 100%

Answer 4

将flex-shrink: 1添加到需要换行的元素的父级已在IE10中为我修复此内容。

注意：flex: 1 1 auto（或-ms-flex）是以下的简写：

flex-grow: 1
flex-shrink: 1
flex-basis: auto

在这种情况下，具体flex-shrink将解决问题。默认情况下，此属性应为1，因此我假设这是灵活方框的IE10实现的错误，并通过显式设置其值，它修复了错误。

Answer 5

这张图片显示IE 10中的defult flex意味着，IE10中的flex-shrink默认值为0; 所以如果代码是：

.title {
   display: flex;
   justify-content: space-between;
}

<div class="title">
    <span class="title-name">some word word word</span>
    <label >some one checkbox</label>
</div>

但是跨度不会在IE10中换行，所以代码必须是这样的：

.title {
    display: flex;
    justify-content: space-between;
}
.title-name{
    display: block;
    flex-shrink: 1;
}

IE10 Flexbox P元素非包装

5 个答案: