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

Text in a flex container doesn't wrap in IE11

提问by Misha Moroshko

Consider the following snippet:

考虑以下片段：

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

In Chrome, the text is wrapping as expected:

在 Chrome 中，文本按预期换行：

But, in IE11, the text is not wrapping:

但是，在 IE11 中，文本没有换行：

Is this a known bug in IE? (if yes, a pointer will be appreciated)

这是 IE 中的已知错误吗？（如果是，将不胜感激指针）

Is there a known workaround?

有已知的解决方法吗？

---

---

This similar questiondoesn't have a definite answer and an official pointer.

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

回答by Michael Benjamin

Add this to your code:

将此添加到您的代码中：

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

我们知道块级子级应该占据父级的全部宽度。

Chrome understands this.

Chrome 明白这一点。

IE11, for whatever reason, wants an explicit request.

无论出于何种原因，IE11 都需要明确的请求。

Using flex-basis: 100%or flex: 1also works.

使用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>

Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE

注意：有时需要对 HTML 结构的各个级别进行排序，以确定哪个容器获得width: 100%. CSS 换行文本在 IE 中不起作用

回答by Andry

I had the same issue and the point is that the element was not adapting its width to the container.

我有同样的问题，关键是元素没有适应容器的宽度。

Instead of using width:100%, be consistent(don't mix the floating model and the flex model) and use flex by adding this:

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

.child { align-self: stretch; }

Or:

或者：

.parent { align-items: stretch; }

This worked for me.

这对我有用。

回答by dude

As Tylerhas suggested in one of the comments here, using

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

max-width: 100%;

on the child may work (worked for me). Using align-self: stretchonly works if you aren't using align-items: center(which I did). width: 100%only works if you haven't multiple childs inside your flexbox which you want to show side by side.

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

回答by Angus Grant

Hi for me I had to apply the 100% width to its grandparent element. Not its child element(s).

嗨，我必须将 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;
}

回答by Fabian von Ellerts

Somehow all these solutions didn't work for me. There is clearly an IE bug in flex-direction:column.

不知何故，所有这些解决方案对我都不起作用。中显然存在 IE 错误flex-direction:column。

I only got it working after removing flex-direction:

删除后我才开始工作flex-direction：

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

回答by Robert Freund

I did not find my solution here, maybe someone will be useful:

我没有在这里找到我的解决方案，也许有人会有用：

.child-with-overflowed-text{
  word-wrap: break-all;
}

Good luck!

祝你好运！

回答by Shruti Agrawal

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

This worked for me.

这对我有用。

回答by Thomas Aumaitre

Me too I encountered this issue.

我也遇到了这个问题。

The only alternative is to define a width (or max-width) in the child elements. IE 11 is a bit stupid, and me I just spent 20 minutes to realize this solution.

唯一的选择是在子元素中定义宽度（或最大宽度）。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>

回答by Sa?a Nikoli?

I had a similar issue with overflowing images in a flex wrapper.

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

Adding either flex-basis: 100%;or flex: 1;to the overflowing child fixed worked for me.

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

回答by Petr Varyagin

The proposed solutions did not help me with ".child {width: 100%;}", since I had more complicated markup. However, I found a solution - remove "align-items: center;", and it works for this case too.

建议的解决方案对“.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>