Css 忽略nowrap的Firefox文本溢出（Chrome works）

我已经创建了一个JSFIDLE来解决这个问题

这在Firefox v33和v33.1上有效，但在34-35中一直失败。这在Chrome和IE11中正常工作。这可能是Firefox中的一个bug，但我不确定。基本上，我的HTML如下所示：

.container{
位置：绝对位置；
宽度：150px；
}
.innercontainer{
位置：相对位置；
右边填充：25px；
边缘底部：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.外衣{
显示：块；
高度：24px；
文本对齐：居中；
字体大小：10px；
线高：24px；
边缘底部：5px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
}
.包装纸{
弹性：1；
-ms-flex:10自动；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
背景颜色：灰色；
}
.包装跨度{
显示：块；
弹性：1；
-ms-flex:1；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
文本对齐：左对齐；
字体大小：10px；
填充：0 5px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
颜色：#FFFFFF；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

这里的超长字符串超长字符串
这里是超长的绳子

问题在于引入了：

为了为flex项目提供更合理的默认最小尺寸，此 规范引入了一个新值作为初始值 中定义的和属性的 css2.1

该

auto

值计算为

0

，除了

当在柔性项目的主轴最小尺寸上指定时，其在中可见 财产

在您的例子中，主轴是水平轴。因此，如果将

overflow-x

设置为除

visible

之外的任何值，

min width

将计算为

0

，这是引入

自动

之前的初始值

比如说,

.wrapper{
溢出：隐藏；
}

.container{
位置：绝对位置；
宽度：150px；
}
.innercontainer{
位置：相对位置；
右边填充：25px；
边缘底部：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.外衣{
显示：块；
高度：24px；
文本对齐：居中；
字体大小：10px；
线高：24px；
边缘底部：5px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
}
.包装纸{
弹性：1；
-ms-flex:10自动；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
背景颜色：灰色；
溢出：隐藏；
}
.包装跨度{
显示：块；
弹性：1；
-ms-flex:1；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
文本对齐：左对齐；
字体大小：10px；
填充：0 5px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
颜色：#FFFFFF；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

这里的超长字符串超长字符串
这里是超长的绳子

比这里的其他解决方案更有效（更直接）——只需将

最小宽度设置为0即可

.wrapper {
    min-width:0;
}

（这比
overflow:hidden
更好，因为设置
overflow
会使浏览器在引擎盖下创建一个可滚动区域，这会占用内存。）

有关Firefox34中为什么需要此功能的更多信息，请参阅。（这是对flexbox规范的修改，到目前为止只在Firefox中发布过。）


.container{
位置：绝对位置；
宽度：150px；
}
.innercontainer{
位置：相对位置；
右边填充：25px；
边缘底部：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.外衣{
显示：块；
高度：24px；
文本对齐：居中；
字体大小：10px；
线高：24px；
边缘底部：5px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
}
.包装纸{
弹性：1；
-ms-flex:10自动；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
盒子方向：水平；
-webkit盒方向：水平；
弯曲方向：正常；
-ms弯曲方向：正常；
-moz弯曲方向：正常；
-webkit弯曲方向：正常；
背景颜色：灰色；
最小宽度：0；
}
.包装跨度{
显示：块；
弹性：1；
-ms-flex:1；
-moz-flex:1；
-webkit-flex:1；
-webkit-box-flex:1；
文本对齐：左对齐；
F