CSS: How to shrink td containing ellipsis

Issue

I have done quite a bit or searching on this but could not find a solution for my specific case. I am a beginner to CSS and the solution is probably really simple, I just cannot find it. So I am trying to create a table that has some columns with long text. I am able to show ellipsis to cut off too long text, but I would like to have the column resize and the ellipsis be updated if I reduce the size of the window, that also reduces the size of the table itself. Now the cell width remains the same and a horizontal scroll bar is shown, which I want to prevent. I know using fixed width for the column is probably the problem, but it is the only way I am able to show the ellipsis in the first place, without fixed width no ellipsis is shown. Here is a very simplified piece of code and the css that easily shows the problem:

<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th>one</th>
        <th>two</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          first column
        </td>
        <td>
          <div class="overflowTableText">
            the entire text that is way too long to show all at once
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.tableFixHead {
  overflow: scroll;
  height: 200px;
  max-width: 50%;
}

.overflowTableText {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Any pointers are appreciated

Solution

After fiddling around a bit I found a solution that works with multiple columns with ellipsis:

<div class="tableFixHead">
<table width="100%">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="100px">
        first column
      </td>
      <td class="overflowTableText"><span>
        the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
      </td>
      <td class="overflowTableText"><span>
        the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
      </td>
    </tr>
  </tbody>
</table>
</div>

.tableFixHead {
  overflow: scroll;
  height: 200px;
  border-collapse: separate;
  width: 90%;
  padding-right: 8px;
}

.overflowTableText {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

Answered By - Odanez