Flex容器中的文本在IE11中不换行

将以下内容添加到代码中：

.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中不起作用

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

我也遇到了同样的问题，关键是元素没有根据容器调整其宽度。

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

.child { align-self: stretch; }

或：

.parent { align-items: stretch; }

这对我很有效。

正如泰勒在此处的一条意见中所建议的，使用

max-width: 100%;

关于孩子可能工作（为我工作）。使用align-self: stretch仅适用于不使用align-items: center的情况（我这样做了）。width: 100%仅适用于您的Flexbox中没有多个要并排显示的孩子的情况。

如果简单的解决方案也有效，为什么要使用复杂的解决方案呢？

.child {
white-space: normal;
}

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

我一直能够100%避免这个Flex-Direction列错误的唯一方法是使用最小宽度媒体查询为桌面大小的屏幕上的子元素分配最大宽度。

.parent {
display: flex;
flex-direction: column;
}


//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
.child {
display: block;
max-width: 500px;//maximimum width of the element on a desktop sized screen
}
}

您需要将内联子元素（例如，<span>或<a>）设置为内联以外的其他元素（主要是display：block或display：inline-block），以使修复生效。

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

我只是在卸下flex-direction：

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

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

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

祝你好运！

.grandparent{
display: table;
}


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

这对我很有效。

我也遇到了这个问题。

唯一的替代方法是在子元素中定义宽度（或最大宽度）。IE11有点笨，而我只花了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>

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

将flex-basis: 100%;或flex: 1;添加到溢出的子项中对我来说是可行的。

我找到的最简单的解决方案是将Max-width：100%添加到超出界限的元素。如果您在像carousel这样的东西上使用它，请记住添加一个具有Max-width属性的类。