title: Flex item filled with text overflowing flex container
body: <p>I am facing almost the same problem as in this question:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text">How to keep a flex item from overflowing due to its text?</a></li>
  </ul>
  
  <p>And this solution works perfectly:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display: -webkit-flex; 
  }
  
  .container&gt;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 &gt; div:last-child {
      -webkit-flex: 1;
      -webkit-order:2;
      background: red;
      -webkit-flex:1 0 auto; /*important*/
  }
  .container &gt; div:first-child:hover{
      white-space:normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div&gt;foo barfoo bar&lt;/div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
          &lt;div&gt;foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar&lt;/div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div&gt;foo barfoo bar&lt;/div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
          &lt;div&gt;foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar
          foo barfoo barfoo barfoo barfoo barfoo barfoo bar&lt;/div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
  &lt;/div&gt;&lt;div class="container"&gt;
      &lt;div&gt;foo barfoo bar&lt;/div&gt;
      &lt;div&gt;foo bar&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(<a href="http://jsfiddle.net/iamanubhavsaini/zWtBu/" rel="noreferrer">jsFiddle version</a>)</p>
  
  <p>But if I put the presented div in a div with <code>display: flex</code>, my problem comes back.</p>
  
  <p>Here is the full code which does not work. The problem is exactly the same as in the above question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display: flex; 
  }
  
  .container&gt;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 &gt; div:last-child {
      -webkit-flex: 1;
      -webkit-order:2;
      background: red;
      -webkit-flex:1 0 auto; /*important*/
  }
  
  
  .test-flex {
    display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test-flex"&gt;
    &lt;div class="container"&gt;
            &lt;div&gt;foo barfoo barfoo barfoo barfoo barfoo barfoo bar
            foo barfoo barfoo barfoo barfoo barfoo barfoo bar
            foo barfoo barfoo barfoo barfoo barfoo barfoo bar&lt;/div&gt;
        &lt;div&gt;foo bar&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>