Flex容器中的文本不会在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中的已知错误吗？(如果是,将指示指针)

有一个已知的解决方法吗？

---

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

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包装文本在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;
}