如何防止弹性项目因其文本溢出？

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

更新

添加有效的代码：

.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删除了该错误。