text-overflow: ellipsis and flex
<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>