title: text-overflow: ellipsis and flex
body: <p>I have a container element with <code>display: flex</code> property set.
  A children have fixed width (<code>flex: 0 0 auto</code>), another one no (<code>flex: 1</code>). The flexible children has some other children: I want this container (<code>inner</code>) to clip its children according to the parent width.</p>
  
  <p>I managed to do this, but also I'd like to get the <em>ellipsis</em> overflow in case the content is clipped (the number of children is not fixed).</p>
  
  <p>This is my code so far:</p>
  
  <pre><code>.outer {
    border: 1px solid red;
    display: flex;
    width: 400px;
  }
  
  .inner {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
  }
  
  .child {
    display: inline-block;
    white-space: nowrap;
    flex: 1;
    border: 1px solid blue;
  }
  
  .btn {
    border: 1px solid green;
    flex: 0 0 auto;
  }
  </code></pre>
  
  <p>Live here: <a href="http://jsbin.com/niheyiwiya/edit?html,css,output" rel="noreferrer">http://jsbin.com/niheyiwiya/edit?html,css,output</a></p>
  
  <p>How can I get the following desired result? (hacks welcome - css only please!)</p>
  
  <p><a href="https://i.stack.imgur.com/BE2mD.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/BE2mD.jpg" alt="enter image description here"></a></p>