white-space: nowrap; and flexbox did not work in chrome
<p>Recent update of Chrome breaks <code>white-space: nowrap</code> using <code>text-overflow: ellipsis;</code> on a <code>overflow: hidden</code> element. How to fix that without adding hard-coded width on <code>name</code> class..</p>

<pre><code>&lt;h1&gt;problem&lt;/h1&gt;
&lt;div class="container"&gt;
  &lt;div class="name"&gt;
    &lt;div class="firstname"&gt;
      test
    &lt;/div&gt;
    &lt;div class="lastname"&gt;
      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd asd asd as das da asdas dasd asda sdasd as dasd asd asd as dasd a
    &lt;/div&gt;
  &lt;/div&gt;  
  &lt;div class="side"&gt;
    options
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The structure should not change because I reuse the <code>.name</code> section somewhere else in my app.</p>

<pre><code>.container {
  width: 800px;
  height: 80px;
  display: flex;
  border: solid 1px black;
  margin: 10px;
}
.name {
  display: flex;
}
.firstname {
  width: 100px;
  background-color: grey;
}
.lastname {
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.side {
  flex-grow: 0;
}
.side, .firstname, .lastname {
  align-self: center;
  padding: 0 20px;
}
</code></pre>

<p><a href="http://codepen.io/anon/pen/xZpMYg">http://codepen.io/anon/pen/xZpMYg</a></p>