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错误存储库

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和11妥善包裹width或max-width开display: flex元素和需要将其文本包裹孩子.

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

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

这是Codepen演示.