IE11 flexbox如何防止文本换行？

Question

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

如果在IE11中加载此页面，则左侧的“从Firefox切换到SeaMonkey”菜单项不会将其文本包装成包含DIV的大小，而是会溢出。我看不出这是为什么。这只是IE11中的一个bug还是我缺少一些CSS来使其自动换行？

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

IE11：

Edge：

- Jez

---

我不认为这是重复的问题；我甚至不确定那个链接的问题是否描述了与此处相同的问题，而且被接受的答案在我的IE11中实际上也不起作用。 - Jez

好消息是IE11不会结束我们过去十年的CSS噩梦。IE快点消失吧，顺便问一句，这是个好问题。 - andygoestohollywood

相关代码需要成为问题的一部分。 - cimmanon

相关：为什么IE11在flexbox中不换行？ - Michael Benjamin

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缺陷库

- MsMaryMak

---

虽然这个错误看起来很相似，但我无法在我的示例网站上使修复生效。 - Jez

请问您能否更详细地说明一下您以前解决问题的方法？ - abarisone

这是对我有效的答案。我有一个适用于网站的图像浏览器，带有上方的文件夹导航和下方的图像以及右侧的‘float:right’上传表单。我不需要添加任何类，只需将其放入当前选择器即可。当然，这极大地取决于你尝试创建的布局类型；感谢您发布这个问题！ - John

Answer 2

我遇到了类似的问题，并发现在使用IE11时，您需要使用以下语法：

flex: 1 1 auto;

更好的选择是：

flex: 1;

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

- Steve Farthing

---

我没有在任何地方使用 flex: 1;，而是使用了 flex: none;。 - Jez

flex-shrink和flex-basis默认已经是1和auto，所以它不会改变任何东西。IE中的flexbox已经破裂了。一旦flex子元素中有太多内容，它就会崩溃，但并非每次都如此。基于随机内容的内容，让我想起了IE6。 - Capsule

Answer 3

据我所知，IE的flexbox实现是有问题的。这就是回答这个问题的长和短的答案。文本应该换行，但在IE中没有。而在Firefox和Chrome中是可以的。

更新： IE11的flexbox实现确实有问题。在Edge中已经可以正常显示了。

- Jez

---

尽管它有些损坏，但我已经找到了一个适用于我的情况的解决方法。将“-ms-overflow-x: hidden;”添加到需要包装的元素中，神奇地起作用了... - pyko

我也没成功。 - Dennis Johnsen

哈，-ms-overflow-x: hidden; 对我也起了作用。我把它放在父元素上（那个带有 display: flex 1 0 auto 的元素）！ - Stephan Bijzitter

Answer 4

通过显式设置 display: flex 元素及需要文字换行的子元素的 width 或 max-width，我成功地让文本在 IE10 和 11 中正确换行。

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

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

这是一个Codepen演示。

- shshaw

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%;
}

- user6995383

Answer 6

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

但是，这也会防止所有子元素溢出，所以如果您在flex项目内使用工具提示或弹出窗口，则可能不是一个好的解决方案。

- envic

Answer 7

感谢Pyko，将以下类添加到不遵循flex的常规溢出规则的任何元素的父级元素中：

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

我不知道为什么这个有效。IE太差了...

- Garrett

---

请阅读此如何回答并遵循指南提供高质量的答案。 - thewaywewere

@thewaywewere 我的回答有什么问题吗？我找到了一个适合我的解决方案，所以想与其他人分享。 - Garrett

Answer 8

我遇到了这个问题的一个版本，其中flex项内部的文本没有换行，发现在我们特定的情况下修复它的方法只是将flex项内的文本包装在<span>元素中，以便文本节点不是flex项的直接后代。这使得文本可以在IE11中像其他浏览器一样换行。

我怀疑这与isralCDuke's answer对这个问题的回答类似，但似乎更简单，因为它不涉及任何额外的CSS规则。

- Nick F

Answer 9

只需删除

align-items: flex-start

对于#ContentNav，在使用列式弹性盒子时没有使用它的理由。

- Nikita Seleckis

Answer 10

略有点晚了，但设置 white-space: normal 对我很管用。

- Bramus

---

在IE11上对我不起作用。 - Jez