How do I make the whole table scale down to the size of it’s parent’s div?

const container = document.querySelector('.container');
const tbody = document.querySelector('#myTable tbody');

const ROW_COUNT = 40;
for (let i = 1; i <= ROW_COUNT; i++) {
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.textContent = 'Row ' + i;
  tr.appendChild(td);
  tbody.appendChild(tr);
}

function updateRowHeights() {
  const rows = tbody.querySelectorAll('tr');
  const totalHeight = container.clientHeight;
  const rowHeight = totalHeight / rows.length;
  rows.forEach(row => {
    row.style.height = rowHeight + 'px';
  });
}

updateRowHeights();
window.addEventListener('resize', updateRowHeights);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 50vh;
  width: 90vw;
  margin: 2rem auto;
  border: 2px solid #666;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #999;
  text-align: center;
}

<div class="container">
    <table id="myTable">
        <tbody></tbody>
    </table>
</div>