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

Other variant for text-overflow: ellipsis when content width must be dynamic

html, body{
  width: 100%;
  padding: 0;
  margin: 0;
  }
  
body{
  padding-top: 10px
  }
  

.container{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: boder-box;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ffffd
  }
  
.title{
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #ffffd
  }
  
.content{
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 0 10px;
  overflow: hidden
  }
  
.wrapper{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis
  }

.area{
  display: flex;
  flex: 0 0 auto;
  flex-grow: 0;
  padding: 0 10px;
  align-items: center;
  background-color: #ffffd
  }

  

      Title
  
 
  

    

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
  
  

    Options
  



  

      Title
  
 
  

    
 Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    
  
  

    Options
  



  

      Title 1 | Title 2
  
 
  

    

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
  
  

    Options 1 | Options 2
  



  

      Title 1 | Title 2
  
 
  

    
 Lorem_Ipsum_isssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    
  
  

    Options 1 | Options 2
  

Example: https://codepen.io/Norfild/pen/KozJzg