First child grow width of content until parent boundary invokes overflow ellipses

Question

So a quick visual of what I\'m trying to accomplish wherein the (gray) parent container is of variable width. The first child (red) is of variable auto width depending on its co

Answer 1

You can do this with flexbox like below:

.container {
  display:flex;
  border:2px solid;
  width:500px;
}
.container > div:last-child {
  width:100px;
  border:2px solid green;
  flex-shrink:0;
}
.container > div:first-child { 
  border:2px solid red;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

  
some text
  



  
some text some text some text some text some text some text some text some text