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

If you apply display: flex to the container to align the items side-by-side, you could then apply flex-shrink: 0 to the green child to be sure that it maintains its size as the red div expands.

div.container { 
  display: flex;
}

div.div1 {
  border: 2px solid red;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

div.div2 {
  border: 2px solid green;
  width: 100px;
  flex-shrink: 0;
}

  

    test test test 
  
  




  

    test test test test test test test test test test test test
    test test test test test test test test test test test test
    test test test test test test test test test test test test