3 column display:flex layout with overflow:ellipsis
<p>Trying to have a layout where the middle column has a flexible width; it should take all space that is not taken by first and last column.</p>

<p>First column is always 50px, last column width is determined by it's contents. As said, middle column should take remainder. </p>

<p>Tried some things with display:flex but can't work it out. </p>

<p>You can see what I tried here; </p>

<p><a href="https://jsfiddle.net/qwxxdkpd/1/" rel="nofollow">https://jsfiddle.net/qwxxdkpd/1/</a></p>

<p>However, middle column is overflowing and pushing third column out of sight. </p>

<p>Correct should be that the middle column is cut off, because I use the following; </p>

<pre><code>#container .list .address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  font-family: "Courier New";
}
</code></pre>

<p>Any ideas on how to fix it; </p>

<p>Should look as this: </p>

<pre><code>Icon|11111111111111111111111111111...|1.2 (end of line)
</code></pre>