如何保持弹性项目由于其文本溢出？
我有一个列表下面的布局。 每个列表项目由两列表示。 第二列应该占用所有可用空间，但是如果第一列占用太多空间，它应该以最小尺寸固定在右边。 第一列应该显示一个省略号。
最后一种情况发生了问题。 当第一列由太多的文本组成，而不是显示一个省略号，它伸出自己的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>
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>
您可以通过将flex属性的第三个值设置为auto来设置孩子的首选大小，如下所示：
flex: 1 0 auto;
这是设置基于flex-basis 属性的简写。
（ 例子 ）
正如在评论中指出，这似乎并没有在铬金丝雀工作，虽然我不知道为什么。
更新：这不是答案。 它解决了不同的问题，这是寻找真正答案的一步。 所以我保留它的历史原因。 请不要对此投票。
我相信这是你的答案： 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/
对于Mozilla应该添加“最小宽度：1px;”
这个例子真的帮助了我： http : //jsfiddle.net/laukstein/LLNsV/
container { display: -webkit-flex; -webkit-flex-direction: row; padding: 0; white-space: nowrap; } .container>div { overflow: hidden; display: inline-block; -webkit-flex: 1; min-width: 0; text-overflow: ellipsis; -moz-box-sizing: border-box; box-sizing: border-box; }
更新：这不是答案。 它解决了不同的问题，这是寻找真正答案的一步。 所以我保留它的历史原因。 请不要对此投票。
编辑2：这个答案不解决问题。 问题的目标与答案之间存在细微的差异。
首先， text-overflow:ellipsis与overflow:hidden 。 实际上，它可以与除overflow:visible之外的任何东西一起工作overflow:visible 。 参考
然后，遍历：
http://jsfiddle.net/iamanubhavsaini/QCLjt/8/
在这里，我已经把overflow和max-width属性。 max-width:60%; 和overflow:hidden是什么使事情出现在你的意图，因为hidden停止显示的文本和60%实际上创build一个确定大小的情况下，太多的文本数据的情况下。
那么，如果你真的对flex框模型感兴趣，那么通过-webkit-order 。
http://jsfiddle.net/iamanubhavsaini/QCLjt/9/
– 码 –
<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>
关心CSS
.container { display: -webkit-flex; } div { white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } .container>div:first-child{ -webkit-order:1; -webkit-flex: 1; } .container > div:last-child { -webkit-flex: 1; -webkit-order:2; background: red; }
– 没有宽度，仍然有效。 这就是我所看到的。
– 评论
-webkit阶：N; 是2年后而不是float:---; 和更多的黑客（如果W3C停留在这个过程中，并且如果每个浏览器供应商都遵循）
在这里，左边的div为1，右边的div为2。 因此，他们是左派右派。
http://jsfiddle.net/iamanubhavsaini/QCLjt/10/
同样的事情，但只有当你正在寻找右 – 左，只是改变的东西的顺序为div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;} div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}
注意：这个-webkit-flex的做事方式显然使这个代码在其他引擎上没有用处。 为了在多个浏览器引擎上重复使用代码，应该使用float 。
下面是一些JS例子; 那不能回答这个问题 – 在评论之后
我认为这回答你的问题，还有更多的问题来了，还有一些其他的方法和不同的解决scheme，但不完全是这个问题的解决scheme。 j </ s> </ s> iamanubhavsaini / 33v8g / 1 /
你应该使容器的位置：亲戚和孩子的位置：绝对的。
