如何防止弹性项因其文本而溢出？[副本]

Question

我有以下的布局在脑海中的一个列表。每个列表项由两列表示。第二列应该占用所有可用空间，但是如果第一列占用太多空间，它应该以最小大小固定在右边。然后，第一列应显示省略号。

问题发生在最后一个案例中。当第一列包含太多文本时，它不会显示省略号，而是将自身从flexbox中伸出，从而显示水平滚动条，而第二列不会定位到右侧。

我想让它呈现如下（模型）：

我怎样才能做到这一点？

这是提琴样品。

.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

更新：这不是答案。它解决了不同的问题，这是找到真正答案的一步。因此，出于历史原因，我保留了它。请不要投票表决。

相信这就是你的答案：http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

参考W3C

对于第一个元素

-webkit-flex: 0 1 auto; /* important to note */

第二个元素呢

-webkit-flex:1 0 auto; /* important to note */

是执行此操作的属性和值。

阅读更多http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex

这就是你如何颠倒顺序：http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

这是一个红色背景的预定义最小宽度：http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

Answer 2

您可以通过将flex属性的第三个值设置为自动来设置子级的首选大小，如下所示：

flex: 1 0 auto;

这是设置flex-base属性的简写。

（示例）

然而，正如评论中所指出的，这在Chrome Canary中似乎不起作用，尽管我不知道为什么。

Answer 3

css lang-css prettyprint-override">.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>