如何防止flex项目因文本而溢出？

Question

我有一个列表的以下布局.每个列表项由两列表示.第二列应占用所有可用空间,但如果第一列占用太多空间,则应以最小大小固定在右侧.然后第一列应显示省略号.

问题出现在最后一个案例中.当第一列包含太多文本而不是显示省略号时,它会将自身伸展到弹性框之外,从而导致出现水平滚动条,而第二列不会固定在右侧.

我希望它像这样呈现(模型):

我怎样才能做到这一点？

这是 样本小提琴.

.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>

Answer 1

UPDATE

添加有效的代码:

.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规范说:" 默认情况下,弹性项目不会缩小到最小内容大小(最长单词或固定大小元素的长度)之下.要更改此项,请设置'min-width'或'min-height'财产. "

如果我们按照这种推理方式,我相信该错误已从Canary中移除,而不是相反.

只要我把检查min-width到0,它工作在加那利.

因此bug在较旧的实现中,并且canary删除了该bug.

这个例子在金丝雀工作.http://jsfiddle.net/iamanubhavsaini/zWtBu/

我使用谷歌Chrome版本23.0.1245.0金丝雀.

Answer 2

您可以通过将flex属性的第三个值设置为auto 来设置子项的首选大小,如下所示:

flex: 1 0 auto;

这是设置flex-basis 属性的简写.

(例子)

然而,如评论中所述,这似乎在Chrome Canary中不起作用,尽管我不确定原因.