Html CSS：中间省略号使用flexbox，在safari中中断

我试图使用flexbox而不是浮动在两个内容之间创建省略号。我所需要的效果可能永远不会与浮动一起工作

第一个“列”包含的信息不如第二列中的信息重要，因此应该在第二列中的任何内容之前进行截断

这种效果在Chrome和FireFox中运行良好，但在Safari中却失败了

根据，我正在使用Safari的正确版本，这显示了对flexbox的完全支持

对于我正在努力实现的实时版本和精简版本：

.parent{
背景颜色：浅灰色；
填充：10px0；
显示器：flex；
最大宽度：410像素；
边缘底部：2px；
}
.不那么重要{
背景颜色：浅粉色；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
填充：0 5px；
}
.更重要{
背景颜色：浅绿色；
空白：nowrap；
填充：0 5px；
}

截断此文本，因为它不太重要
重要文本
不要省略
重要的东西
次要内容
更重要的信息会导致省略

我通过为

指定
的
flex:
属性来实现它。不太重要的
和
。更重要的
：


.parent{
背景颜色：浅灰色；
填充：10px0；
显示器：flex；
最大宽度：410像素；
边缘底部：2px；
}
.不那么重要{
背景颜色：浅粉色；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
填充：0 5px；
flex:01自动；
}
.更重要{
背景颜色：浅绿色；
空白：nowrap；
填充：0 5px；
flex:0自动；
}

截断此文本，因为它不太重要
重要文本
不要省略
重要的东西
次要内容
更重要的信息会导致省略
我一整天都在桌子上砸脸。。。我想知道Safari是否需要被明确告知。不管怎样，这都很棒。谢谢。从一个浏览器到另一个浏览器，Flexbox可能非常挑剔，尤其是“默认行为”。如果你还没有，我强烈建议你把书签收藏起来，谢谢你的资源！非常有用。太棒了，fwiw，添加
文本方向：ltr
以查看
的结尾。更重要的是
而不是开头。