考虑以下片段：
.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 中的已知错误吗？ （如果是的话，将不胜感激）
有已知的解决方法吗？
这个类似的问题 https://stackoverflow.com/q/19138107/247243没有明确的答案和官方指示。
将其添加到您的代码中：
.child { width: 100%; }
我们知道块级子级应该占据父级的整个宽度。
Chrome 明白这一点。
无论出于何种原因，IE11 都需要明确的请求。
Using flex-basis: 100% or 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 中不起作用 https://stackoverflow.com/q/42025810/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
