IE11下Flexbox列表项文本无法换行问题求助

嘿，这个问题我之前也碰到过——IE11对Flexbox的实现确实有不少坑，其中就包括flex子元素的文本换行问题。

问题根源 #

IE11里，flex容器的子元素默认会继承min-width: auto的属性，这会让元素强行撑满自身内容的宽度，完全忽略容器的限制，自然就不会换行。而Chrome、Firefox这些现代浏览器已经修正了这个行为，所以你才会看到只有IE11出问题。

快速修复方案 #

针对你的导航列表结构，只需要给flex容器（也就是<nav>里的<ul>）或者直接给列表项<li>添加几行CSS就能解决：

方案一：修改flex容器的min-width

nav ul {
  min-width: 0;
}

方案二：直接给列表项设置换行相关属性

nav ul li {
  min-width: 0;
  word-wrap: break-word; /* 确保超长文本能强制换行 */
}

备选方案：用overflow触发收缩行为

如果上面的方法效果不理想，也可以通过设置overflow: hidden来让IE11的flex子元素收缩：

nav ul li {
  overflow: hidden;
}

原理说明 #

设置min-width: 0会覆盖IE11默认的auto值，允许flex子元素收缩到容器允许的宽度，这样内部的文本就会自动换行。而overflow: hidden则是通过改变元素的布局上下文，间接触发IE11的收缩逻辑，同样能达到换行的效果。

把这些CSS加到你的代码里，就能让IE11里的列表项文本和其他浏览器一样正常换行啦。

内容的提问来源于stack exchange，提问作者Johannes Gruber