trắng-không gian: nowrap; và flexbox không hoạt động trong chrome

Question

Cập nhật gần đây của Chrome bị hỏng white-space: nowrap sử dụng text-overflow: ellipsis; trên phần tử overflow: hidden. Làm thế nào để khắc phục điều đó mà không cần thêm chiều rộng mã hóa cứng vào name lớp ..

<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> 

Cấu trúc không nên thay đổi vì tôi tái sử dụng các .name phần ở một nơi khác trong ứng dụng của tôi.

.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

Các thiết lập ban đầu vào các mặt hàng flex là min-width: auto. Vì vậy, để mỗi mục ở trong vùng chứa, chúng tôi cần cung cấp chiều rộng tối thiểu: 0.

Thêm min-width: 0;. Đây là công việc dễ dàng xung quanh trong trường hợp của bạn.

đó là

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

Snippet

.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

text-overflow: ellipsis là làm việc với chiều rộng

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