我想要实现的目标：
- 表容器必须填充 100% 的剩余可用空间
- 该表不应以任何方式影响父块
- 只有标题下的第二个映射应该滚动（标题的滚动将通过 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>
);
};
