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&nbsp;{&nbsp;width:&nbsp;100%;&nbsp;}我们知道，块级子应该占据父级的全部宽度。Chrome明白这一点。无论出于什么原因，IE11都想要一个明确的请求。使用flex-basis: 100%或flex: 1也很管用。.parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;column; &nbsp;&nbsp;width:&nbsp;400px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red; &nbsp;&nbsp;align-items:&nbsp;center;}.child&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;width:&nbsp;calc(100%&nbsp;-&nbsp;2px);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;NEW;&nbsp;used&nbsp;calc&nbsp;to&nbsp;adjust&nbsp;for&nbsp;parent&nbsp;borders&nbsp;*/}<div&nbsp;class="parent"> &nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting&nbsp;industry&nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;Lorem&nbsp;Ipsum&nbsp;is&nbsp;simply&nbsp;dummy&nbsp;text&nbsp;of&nbsp;the&nbsp;printing&nbsp;and&nbsp;typesetting&nbsp;industry&nbsp;&nbsp;</div></div>注意：有时需要对HTML结构的各个级别进行排序，以确定哪个容器获得width: 100%.&nbsp;不在IE中工作的CSS包装文本

Answer 2

我也有同样的问题，重点是元素没有调整其宽度以适应容器。而不是使用width:100%,&nbsp;保持一致(不要混合浮动模型和FLEX模型)并通过添加以下内容来使用FLEX：.child&nbsp;{&nbsp;align-self:&nbsp;stretch;&nbsp;}或：.parent&nbsp;{&nbsp;align-items:&nbsp;stretch;&nbsp;}这对我有用。

Answer 3

如泰勒在这里的一个注释中，建议使用max-width:&nbsp;100%;孩子可能会工作(为我工作)。使用align-self: stretch只有当你不使用align-items: center(我做到了)。width: 100%只有当你没有多个孩子在你的柔印盒，你想要并排显示。