Recent update of Chrome breaks white-space: nowrap
using text-overflow: ellipsis;
on a overflow: hidden
element. How to fix that without adding hard-coded width on name
class..
<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>
The structure should not change because I reuse the .name
section somewhere else in my app.
.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;
}
Reference - https://drafts.csswg.org/css-flexbox-1/#min-size-auto
The initial setting on flex items is
min-width: auto
. So, in order for each item to stay within the container, we need to givemin-width: 0
.
Add min-width: 0;
. This is the easy workaround in your case.
that is
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>