我将以下布局考虑在内。每个列表项由两列表示。第二列应占用所有可用空间，但 如果第一列占用太多空间，则应以最小大小将其固定在右侧。第一栏应显示省略号。
问题在最后一种情况下发生。当第一列包含太多文本时，它没有显示省略号，而是将其自身拉伸到弹性框之外，从而导致出现水平滚动条，而第二列则没有锚定在右侧。
.container { display: -webkit-flex; } div { white-space: nowrap; text-overflow: ellipsis; } .container > div:last-child { -webkit-flex: 1; background: red; } <!-- a small first column; the second column is taking up space as expected --> <div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div> <!-- a large first column; the first column is overflowing out of the flexbox container --> <div class="container"> <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div> <div>foo bar</div> </div>
更新
添加有效的代码：
.container { display: -webkit-flex; } .container>div:first-child{ white-space:nowrap; -webkit-order:1; -webkit-flex: 0 1 auto; /*important*/ text-overflow: ellipsis; overflow:hidden; min-width:0; /* new algorithm overrides the width calculation */ } .container > div:last-child { -webkit-flex: 1; -webkit-order:2; background: red; -webkit-flex:1 0 auto; /*important*/ } .container > div:first-child:hover{ white-space:normal; } <div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div> <div class="container"> <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div> <div>foo bar</div> </div> <div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div> <div class="container"> <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div> <div>foo bar</div> </div><div class="container"> <div>foo barfoo bar</div> <div>foo bar</div> </div>
原始答案/解释。W3C规范说：“ 默认情况下，弹性项目不会缩小到其最小内容大小（最长的单词或固定大小的元素的长度）以下。要更改此设置，请设置“最小宽度”或“最小高度”属性。“
如果我们遵循这一思路，我相信该错误已从Canary中删除，而不是相反。
只要我把检查min-width到0，它工作在加那利。
因此，该错误是在较早的实现中出现的，而canary删除了该错误。
