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

<div class="container">
  <div>some text</div>
  <div></div>
</div>
<div class="container">
  <div>some text some text some text some text some text some text some text some text</div>
  <div></div>
</div>

Answer 2

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);
}

<table>
  <thead>
    <tr>
      <th class="flex">
        <div>
          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  
        </div>
        <div>
          Blah
        </div>
      </th>
      <th style="width: 300px">
        <div>
          Another COLUMN
        </div>
      </th>
    </tr>
  </thead>
</table>

Answer 3

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

<div class="container">
  <div class="div1">
    test test test 
  </div>
  <div class="div2"></div>
</div>

<div class="container">
  <div class="div1">
    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
  </div>
  <div class="div2"></div>
</div>