Question

请考虑以下代码段：

- (void)drawRect:(CGRect)rect
{
    [[UIColor colorWithWhite:0 alpha:0] setFill];
    CGContextFillRect(UIGraphicsGetCurrentContext(), rect);

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 20, 20)];
    [[UIColor redColor] setFill];
    [path fill];
}

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

在Chrome中，文字按预期包装：

但是，在IE11中，文本没有包装：

这是IE中的已知错误吗？（如果是的话，将会赞赏指针）

是否有已知的解决方法？

This similar question没有明确的答案和官方指针。

Answer 1

将此添加到您的代码中：

.child { width: 100%; }

我们知道块级子级应该占用父级的全宽。

Chrome了解这一点。

IE11，无论出于何种原因，都想要一个明确的请求。

使用flex-basis: 100%或flex: 1也可以。

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

注意：有时需要对HTML结构的各个级别进行排序，以确定哪个容器获得width: 100%。 CSS wrap text not working in IE

Answer 2

我遇到了同样的问题，重点是该元素没有使其宽度适应容器。

而不是使用width:100%，保持一致（不要混合浮动模型和flex模型），并通过添加以下来使用flex：

.child { align-self: stretch; }

或者：

.parent { align-items: stretch; }

这对我有用。

Answer 3

正如Tyler在其中一条评论中建议的那样，使用

max-width: 100%;

对孩子可能有用（为我工作）。使用align-self: stretch仅在您不使用align-items: center时才有效（我做过）。 width: 100%仅在您希望并排显示的Flexbox中没有多个子项时才有效。

Answer 4

嗨，对我来说，我必须将100％宽度应用于祖父母元素。不是它的子元素。

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

Answer 5

我发现的最简单的解决方案是将 max-width: 100% 添加到超出边界的元素。如果你在旋转木马之类的东西上使用它，记得添加一个具有 max-width 属性的类。

Answer 6

建议的解决方案对“ .child {width：100％;}”没有帮助，因为我的标记更加复杂。但是，我找到了一个解决方案-删除“ align-items：center;”，它在这种情况下也适用。

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Answer 7

我唯一能100％避免这种弹性方向列错误的方法是使用最小宽度媒体查询为桌面大小的屏幕上的子元素分配最大宽度。

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

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

您需要自然地将内联子元素（例如<span>或<a>）设置为内联以外的其他内容（主要是display：block或display：inline-block），以使修复工作。

Answer 8

无论如何，所有这些解决方案都不适合我。 dfInput.groupby(['Region','ID']).Value.apply(lambda x : x.head(1) if x.isnull().all() else x.dropna()).\ reset_index(level=[0,1]).sort_index() Out[86]: Region ID Value 0 1 A 0.0 1 1 A 1.0 2 2 B 1.0 4 2 B 2.0 5 2 A NaN中显然有一个IE错误。

我只有在删除flex-direction:column后才能正常工作：

flex-direction

Answer 9

我在这里找不到解决方案，也许有人会有用的

.child-with-overflowed-text{
  word-wrap: break-all;
}

祝你好运！

Answer 10

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

这对我有用。

Answer 11

我也遇到了这个问题。

唯一的选择是在子元素中定义宽度（或最大宽度）。 IE 11有点愚蠢，我只花了20分钟来实现此解决方案。

</body>

Answer 12

在flex包装器中图像溢出时，我也遇到类似的问题。

将flex-basis: 100%;或flex: 1;添加到溢出的子项对我来说很有效。

Answer 13

如果一个简单的解决方案也可以使用复杂的解决方案？

.child {
  white-space: normal;
}

Flex容器中的文本不会在IE11中换行

13 个答案: