柔性容器中的文本不包装在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中的一个已知的错误？ （如果是的话，一个指针将不胜感激）

有没有已知的解决方法？

---

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

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> 

Answer 2

我有同样的问题，重点是该元素不适应其宽度的容器。

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

 .child { align-self: stretch; } 

要么：

 .parent { align-items: stretch; } 

这对我有效。

Answer 3

嗨，对我来说，我不得不将其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 4

正如泰勒在这里的一个评论中所build议的那样，使用

 max-width: 100%; 

对孩子可能工作（为我工作）。 使用align-self: stretch只有在你不使用align-items: center （我做过）时才有效。 width: 100%只适用于您的柔性盒内没有多个孩子的情况，这些儿童要并排显示。