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

Question

考虑以下片段：

.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 中的已知错误吗？（如果是，将不胜感激）

是否有已知的解决方法？

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

Answer 2

您好，我必须将 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 3

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

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

.child { align-self: stretch; }

或者：

.parent { align-items: stretch; }

这对我有用。

Answer 4

正如在此处的一条评论中所建议的那样，使用

max-width: 100%;

在 child 上可能有用（对我有用）。使用 align-self: stretch 仅在您不使用 align-items: center 时才有效（我这样做了）。 width: 100% 仅当您想要并排显示的 flexbox 中没有多个 child 时才有效。

Answer 5

如果一个简单的解决方案也有效，为什么还要使用复杂的解决方案？

.child {
  white-space: normal;
}

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% 避免此 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）使修复工作。

Answer 8

不知何故，所有这些解决方案都不适合我。 flex-direction:column.

中明显存在 IE 错误

我只是在删除 flex-direction:

后才开始工作

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

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分钟就实现了这个解决方案

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

Answer 12

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

将 flex-basis: 100%; 或 flex: 1; 添加到溢出的子修复对我有用。

Answer 13

我找到的最简单的解决方案是将 max-width: 100% 添加到超出范围的元素。如果你在轮播之类的东西上使用它，记得添加一个 class 和 max-width 属性。

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

Text in a flex container doesn't wrap in IE11

css

internet-explorer

flexbox

internet-explorer-11