表挤出父容器

我想要实现的目标：

1. 表容器必须填充 100% 的剩余可用空间
2. 该表不应以任何方式影响父块
3. 只有标题下的第二个映射应该滚动（标题的滚动将通过 ref 控制）

我知道我可以设置容器的固定大小并编写一个调整大小观察器，该观察器将根据窗口大小进行拉伸，但这不是理想的情况。有一种感觉，这可以更容易地完成。

为了方便理解我做了一个沙箱

我在这里复制代码：

const MOCK_DATA = [
  {
    id: 0,
    columnName: '0',
    cards: Array(50)
      .fill('1')
      .map((item, index) => ({
        id: index,
        cardType: 'someType',
        description: 'Описание',
        date: '3.09.24',
      })),
  },
];

for (let i = 1; i < 50; i += 1) {
  MOCK_DATA.push({
    id: i,
    columnName: i.toString(),
    cards: [
      {
        id: i,
        cardType: 'someType',
        description: 'Описание',
        date: '3.09.24',
      },
    ],
  });
}

export const App = () => {
  return (
    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
      <div style={{ display: 'flex', width: '100%' }}>
        <div style={{ width: 200, height: '100%', background: 'lightblue' }}>
          Menu
        </div>
        <div style={{ width: '100%' }}>
          <div style={{ width: '100%', height: 200, background: 'lightgreen' }}>
            Header
          </div>
          <MyTable />
        </div>
      </div>
    </div>
  );
};

export const MyTable = () => {
  return (
    // Этот контейнер должен занимать всю оставшуюся площадь после меню и хидера
    <div style={{ maxWidth: '100%', overflow: 'auto' }}>
      <div style={{ display: 'flex', overflow: 'hidden' }}>
        {MOCK_DATA.map((column) => {
          return <div style={{ width: 165 }}>{column.columnName}</div>;
        })}
      </div>
      {/* // Этот контейнер должен скроллиться */}
      <div style={{ display: 'flex', overflow: 'auto' }}>
        {MOCK_DATA.map((column) => {
          return (
            <div style={{ minWidth: 165 }}>
              {column.cards.map((card) => {
                return <div>{card.description}</div>;
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
};