IE11 flexbox防止文本换行？

Question

我正在开发一个在最新版本的Firefox / SeaMonkey / Chrome中显示OK的网站，但有趣的是在IE11中存在渲染问题：
http://devel.gooeysoftware.com/mozaddons/switching.php

如果你在IE11中加载它，左边的“从Firefox切换到SeaMonkey”菜单项不会将其文本包装到包含DIV的大小，而是溢出。我不明白为什么会这样。它只是IE11中的一个错误，还是我错过了一些CSS来包装？

更新

看起来他们在Edge中修复了一堆IE11 flexbox渲染错误。

IE11：

边：

Answer 1

在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 */
}

Flexbox bug repository

Answer 2

我遇到了类似的问题，在IE11中发现你需要使用语法：

flex: 1 1 auto;

而不是：

flex: 1;

感谢这个Github提交：https://github.com/philipwalton/solved-by-flexbox/pull/8/files

Answer 3

据我所知，IE的flexbox实现刚刚破解。这是这个问题的长而短的答案。文本应该是包装，但事实并非如此。它适用于Firefox和Chrome。

<强>更新

IE11的flexbox实现确实被打破了。这现在可以在Edge中正确呈现。

Answer 4

我能够将文本正确地包装在IE10＆amp; 11通过在width元素上明确设置max-width或display: flex以及需要包含其文本的子项。

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

这是Codepen demo。

Answer 5

这支笔有帮助吗？以下是我发现的为ie11提供的解决方法。

http://codepen.io/dukebranding/pen/vLQxGy

p {
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;
}

Answer 6

我通过将overflow: hidden添加到flex项来解决了这个问题。

但是这也会阻止所有子元素溢出，所以如果你在flex项目中使用工具提示或弹出窗口，这可能是一个糟糕的解决方案。

Answer 7

感谢pyko，将以下类添加到任何不符合flex常用溢出规则的内容中：

.ie-dont-overflow {
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;
}

我不知道为什么会这样。 IE糟透了......

Answer 8

我遇到了此错误的一个版本，其中未包含flex项目中的文本，发现在我们的特殊情况下解决该问题的方法只是将文本包含在<span>中元素，因此文本节点不是弹性项目的直接后代。就像在其他浏览器中一样，这允许文本在IE11中进行换行。

我怀疑这与isralCDuke's answer的问题类似，但确实可行，因为它不涉及额外的CSS规则。

Answer 9

派对有点晚了，但设置white-space: normal对我来说很有用。