用文本溢出的Flex容器填充Flex项[重复]

Question

我面临的问题与这个问题几乎相同：

• 如何防止弹性项因其文本而溢出

这个解决方案非常有效：

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

（jsFiddle版本）

但是，如果我将显示的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>

Answer 1

... 如果我将显示的div放入带有display:flex的div中，我的问题又回来了。。。这个问题和上面的问题完全一样。

解决方案也与该问题相同：将min width:0添加到弹性项。

如该问题的公认答案所述，默认情况下，弹性项不能小于其内容的大小。

现在您已经创建了一个新的主容器（.test flex），您已经将以前的主容器（.container）作为一个flex项。

您现在需要覆盖flex项目的默认设置（minwidth:auto）以允许。容器缩小到其子容器的大小（带文本的div）。

您可以通过以下方式实现：

• 最小宽度：0，或

.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;
}

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