【備忘録】MUI container内部のレスポンシブテーブル

最上位のコンテナにピクセル単位で最大幅を指定している状態で、子供のコンポーネント内部のテーブルを直上の親の最大幅に展開した上でオーバーフローさせる。

親に100vwを指定してあげる必要があった。
100%の時にテーブルのラッパーになっている親の要素の最大幅になるかと思いきや、gridコンテナの最大幅まで広がってしまっていた。

sample.tsx

       <Grid container justifyContent="center">
        <Grid container maxWidth={ContainerSize.default.max}>
          <Grid item xs>
            <Card sx={{ maxWidth: "100vw" }}>
              <CardContent>
                <TableContainer>
                  <Table>
                    <TableBody>
                      <TableRow>
                        {[...Array(100)].map((_, i) => (
                          <TableCell key={i}>{i}</TableCell>
                        ))}
                      </TableRow>
                    </TableBody>
                  </Table>
                </TableContainer>
              </CardContent>
            </Card>
	  </Grid>
	 </Grid>
	</Grid>