white-space: nowrap; and flexbox did not work in chrome

Question

Recent update of Chrome breaks white-space: nowrap using text-overflow: ellipsis; on a overflow: hidden element. How to fix that without a

Answer 1

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 give min-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;
}

problem

  

    

      test
    
    

      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
    
  
  
  

    options
  


expected result


  

    

      test
    
    

      as kjldashdk ja asdjhk ashdjk ashdjk asdjasdkajsdh akjsd asd asd asd asd sa dad...
    
  
  
  

    options