css – 如何保持flex项目溢出由于其文本？

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

问题出现在最后一种情况。当第一列由太多的文本组成，而不是显示省略号时，它会伸出FlexBox，导致出现水平滚动条，而第二列不会锚定在右侧。

我想让它像这样(mockup)：

我如何实现呢？

这是sample fiddle。

HTML：

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

CSS：

.container {
    display: -webkit-flex;
}

div {
    white-space: Nowrap;
    text-overflow: ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}

解决方法

更新

添加工作原理的代码：

.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规范说，“默认情况下，flex项目不会缩小到它们的最小内容大小(最长字或固定大小的元素的长度)之下。要改变它，设置’min-width’或’min-height’属性。”

如果我们遵循这一推理，我相信这个错误已经从金丝雀中删除，而不是相反。

检查，只要我把最小宽度为0，它工作在金丝雀。

所以bug是在旧的实现，而金丝雀删除该bug。

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

我使用Google Chrome版本23.0.1245.0金丝雀。

原文地址：https://www.jb51.cc/css/222206.html