我面临的问题与此问题几乎相同:
这个解决方案非常有效:
.container {
display: -webkit-flex;
}
.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0px; /* new algorithm mises the calculation of the width */
}
.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>
但是,如果我将显示的div放在带有display: flex
的div中,我的问题就会回来。
这是完整的代码,不起作用。问题与上述问题完全相同。
.container {
display: flex;
}
.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0px; /* new algorithm mises the calculation of the width */
}
.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
-webkit-flex:1 0 auto; /*important*/
}
.test-flex {
display: flex;
}
<div class="test-flex">
<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>
答案 0 :(得分:6)
...如果我将显示的div放在带有
display: flex
的div中,我的问题会回来。 ......问题与上述问题完全相同。
解决方案也与that question中的解决方案相同:将min-width: 0
添加到Flex项目。
如该问题的accepted answer所述,默认情况下,弹性项目不能小于其内容的大小。
现在您已经创建了一个新的主容器(.test-flex
),您已经使之前的主容器(.container
)成为了一个灵活项目。
您现在需要覆盖弹性项目(min-width: auto
)的默认设置,以允许.container
缩小超过其子级的大小(带有文本的div)。
你可以这样做:
min-width: 0
或overflow: hidden
.container {
display: flex;
min-width: 0; /* NEW */
}
.container>div:first-child {
white-space: nowrap;
order: 1;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0px;
}
.container > div:last-child {
order: 2;
background: red;
flex: 1 0 auto;
}
.test-flex {
display: flex;
}
&#13;
<div class="test-flex">
<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>
&#13;