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

考虑以下代码段：

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

在Chrome中，文本按预期自动换行：

但是，在IE11中，文本未包装：

这是IE中的已知错误吗？（如果是，将不胜感激指针）

有已知的解决方法吗？

这个类似的问题没有明确的答案和官方的指针。

将此添加到您的代码：

.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换行文字在IE中不起作用

我遇到了同样的问题，关键是该元素没有根据容器调整其宽度。

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

.child { align-self: stretch; }

要么：

.parent { align-items: stretch; }

这对我有用。

正如泰勒在此处的评论之一中建议的那样，使用

max-width: 100%;

在孩子身上可能会工作（为我工作）。使用align-self: stretch只有当你不使用的作品align-items: center（我做了）。width: 100%仅当您的Flexbox中没有要同时显示的多个子项时，该选项才有效。

嗨，我不得不将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;
}

所有这些解决方案都对我不起作用。显然存在中的IE错误flex-direction:column。

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

flex-wrap: wrap;
align-items: center;
align-content: center;

提议的解决方案对“ .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>

我100％始终能够避免发生该flex-direction列错误的唯一方法是使用最小宽度的媒体查询为桌面大小的屏幕上的子元素分配最大宽度。

.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），此修补程序才能起作用。

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

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

祝好运！

.grandparent{
   display: table;
}

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

这对我有用。

我也遇到了这个问题。

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

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

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

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

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

如果简单的解决方案也可行，为什么还要使用复杂的解决方案？

.child {
  white-space: normal;
}