如何强制包含不断增长的HTML表的React组件保持在预期的最大维度内？

.table-container {
  max-height: 400px;
  max-width: 800px;
  overflow: auto;
}

class TableComponent extends React.Component {
  componentDidUpdate() {
    const table = document.getElementById('table');
    const tableContainer = document.getElementById('table-container');
    if (table.offsetHeight > tableContainer.offsetHeight) {
      table.style.width = `${table.offsetWidth + 20}px`;
    }
    if (table.offsetWidth > tableContainer.offsetWidth) {
      table.style.height = `${table.offsetHeight + 20}px`;
    }
  }

  render() {
    return (
      <div id="table-container" className="table-container">
        <table id="table">
          {/* 表格内容 */}
        </table>
      </div>
    );
  }
}