title: How to keep a flex item from overflowing due to its text?
body: <p>I have the following layout in mind for a list. Each list item is represented by two columns. The second column should take up all available space, but it should be anchored to the right with its minimum size if the first column is taking up too much space. The first column should then show an ellipsis.</p>
  
  <p>The problem is happening in that last case. When the first column consists of too much text, instead of showing an ellipsis, it stretches itself out of the flexbox causing an horizontal scrollbar to appear, and the second column is not anchored to the right.</p>
  
  <p>I would like to have it rendered like this (mockup):</p>
  
  <p><img src="https://i.stack.imgur.com/JOwgO.png" alt="Expected rendering"></p>
  
  <p>How can I achieve that?</p>
  
  <p>This is  <a href="http://jsfiddle.net/QCLjt/2/" rel="noreferrer">sample fiddle</a> .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display: -webkit-flex;
  }
  
  div {
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  .container &gt; div:last-child {
      -webkit-flex: 1;
      background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- a small first column; the second column is taking up space as expected --&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;!-- a large first column; the first column is overflowing out of the flexbox container --&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;</code></pre>
  </div>
  </div>
  </p>