我正在开发一个在最新版本的 Firefox/SeaMonkey/Chrome 中显示 OK 的网站，但有趣的是在 IE11 中存在渲染问题：
http ://devel.gooeysoftware.com/mozaddons/switching.php
如果在 IE11 中加载它，左侧的“从 Firefox 切换到 SeaMonkey”菜单项不会将其文本换成包含 DIV 的大小，而是会溢出。我不明白这是为什么。它只是 IE11 中的一个错误，还是我缺少一些 CSS 来包装它？
看起来他们修复了 Edge 中的一堆 IE11 flexbox 渲染错误。
IE11：
边缘：
在 Flexbox 错误存储库中找到了这个简单的修复：
/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
* overflow.
* 2. Set `box-sizing:border-box` if
* needed to account for padding
* and border size.
*/
.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}
我遇到了类似的问题，发现使用 IE11 需要使用以下语法：
flex: 1 1 auto;
而不是：
flex: 1;
感谢这个 Github 提交：https ://github.com/philipwalton/solved-by-flexbox/pull/8/files
据我所知，IE 的 flexbox 实现刚刚被破坏。这是对这个问题的长而短的回答。文本应该换行，但事实并非如此。它在 Firefox 和 Chrome 中。
更新：
IE11 的 flexbox 实现确实被破坏了。现在可以在 Edge 中正确渲染。
通过在元素和需要包装其文本的子元素上显式设置 a widthor ，我能够使文本正确包装在 IE10 和 11 中。max-widthdisplay: flex
.flex-fix {
display: flex;
flex-wrap: wrap;
}
.flex-fix,
.flex-fix > * {
max-width: 100%;
}
这是一个Codepen 演示。
这支笔有用吗？这是我发现的 ie11 的解决方法。
http://codepen.io/dukebranding/pen/vLQxGy
p {
/* Wrap the child text in a block tag, add the following styles */
display: flex;
width: 100%;
}
我通过添加overflow: hidden到弹性项目解决了这个问题。
但这也可以防止所有子元素溢出，因此如果您在弹性项目中使用工具提示或弹出框，这可能是一个糟糕的解决方案。
感谢 pyko，将以下类添加到任何不符合 flex 通常溢出规则的父类：
.ie-dont-overflow {
-ms-overflow-x: hidden;
-ms-overflow-y: hidden;
}
我不知道为什么会这样。IE很烂...
我遇到了这个错误的一个版本，其中弹性项目内的文本没有换行，并发现在我们的特定情况下修复它的方法只是将弹性项目内的文本包装在一个<span>元素中，以便文本节点是不是弹性项目的直接后代。这允许文本在 IE11 中换行，就像在其他浏览器中一样。
我怀疑这与isralCDuke 对这个问题的回答的原因相似，但似乎更简单，因为它不涉及额外的 CSS 规则。
只需删除
align-items: flex-start
为#ContentNav. 没有理由将它用于列式 flexbox。
派对有点晚了，但设置white-space: normal对我有用。