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

1. Set table-layout: fixed so your table uses 300px for 'Another Column' and the remaining space (100% - 300px) for the first two columns.
2. Use the correct value for text-overflow (ellipsis not ellipses)
3. Set the first th to display: flex and remove height: 1rem which truncates the contents of the cell.

table {
  table-layout: fixed;
  width: 100%;
}

.flex {
  display: flex;
}

th {
  border: gray 1px dotted;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div {  
  border: red 3px dashed;
  min-width: 3rem;
  overflow: hidden;
  text-overflow: ellipses;
  white-space: nowrap;
  background-color: rgba(red, .2);  
}

div:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div:nth-child(2) {
  border: green 3px dashed;
  background-color: rgba(green, .2);
}

  

    

      

        

          Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing  
        
        

          Blah
        
      
      

        

          Another COLUMN