White-space: nowrap; и flexbox не работал в хроме

Недавнее обновление Chrome breaks white-space: nowrap с помощью text-overflow: ellipsis; в элементе overflow: hidden. Как исправить это, не добавляя жестко-кодированную ширину в классе name..

<h1>problem</h1>
<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      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
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

Структура не должна меняться, потому что я повторно использую раздел .name где-то еще в своем приложении.

.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;
}

http://codepen.io/anon/pen/xZpMYg

Ответы

Ответ 1

Первоначальная настройка элементов flex - min-width: auto. Итак, для того, чтобы каждый элемент должен оставаться в контейнере, мы должны дать min-width: 0.

Добавить min-width: 0;. Это легкая работа в вашем случае.

то есть

name {
  display: flex;
  min-width: 0;
}

Отрывок

.container {
  width: 800px;
  height: 80px;
  display: flex;
  border: solid 1px black;
  margin: 10px;
}
.name {
  display: flex;
  min-width: 0;
}
.firstname {
  width: 100px;
  background-color: grey;
}
.lastname {
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
.side {
  flex-grow: 0;
}
.side, .firstname, .lastname {
  align-self: center;
  padding: 0 20px;
}
<h1>problem</h1>
<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      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
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

<h1>expected result</h1>

<div class="container">
  <div class="name">
    <div class="firstname">
      test
    </div>
    <div class="lastname">
      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad...
    </div>
  </div>  
  <div class="side">
    options
  </div>
</div>

Ответ 2

text-overflow: эллипсис работает с шириной

.lastname { 
  width: 525px;
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}