white-space: nowrap; и flexbox не работал в chrome

Question

Последнее обновление 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

Answer 1

Первоначальная установка на гибких элементов является мин-ширина: авто. Таким образом, для того, чтобы каждый пункт, чтобы остаться в контейнере мы должны дать мин-ширина: 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>

Answer 2

текста переполнения: многоточие работа с шириной

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