Flex容器中的文本不会在IE11中包装

Question

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>有已知的解决办法吗？

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%. 不在IE中工作的CSS包装文本

Answer 2

我也有同样的问题，重点是元素没有调整其宽度以适应容器。

而不是使用width:100%, 保持一致(不要混合浮动模型和FLEX模型)并通过添加以下内容来使用FLEX：

.child { align-self: stretch; }

或：

.parent { align-items: stretch; }

这对我有用。

Answer 3

如泰勒在这里的一个注释中，建议使用

max-width: 100%;

孩子可能会工作(为我工作)。使用align-self: stretch只有当你不使用align-items: center(我做到了)。width: 100%只有当你没有多个孩子在你的柔印盒，你想要并排显示。