我這里有一個代碼沙箱來展示我的意思。我希望藍色的桌子和所有的卡片一樣寬。cardsData的長度會有所不同，不想通過計算其寬度來增加復雜性。有沒有辦法讓父卡片的寬度(或者兄弟卡片的寬度)和溢出卡片的寬度一樣？

提前感謝。如果更簡單，下面是粘貼的相同代碼

import "./styles.css";
import React, { useEffect, useState } from "react";

import {
  Box,
  Grid,
  TableContainer,
  Paper,
  Table,
  TableHead,
  TableRow,
  TableCell
} from "@mui/material";
export default function App() {
  const cardsData = [{}, {}, {}, {}, {}];

  const TableData = () => (
    <TableContainer
      component={Paper}
      sx={{ width: "100%", background: "blue" }}
    >
      <Table id='would like table to extand same width as width of cards' sx={{ ".MuiTableCell-root": { minWidth: "20%" } }}>
        <TableHead>
          <TableRow>
            <TableCell></TableCell>
          </TableRow>
        </TableHead>
      </Table>
    </TableContainer>
  );

  const Cards = ({ i }) => (
    <Box
      sx={{
        background: i === 0 ? "#f6f7f7" : "#f5f7fe",
        minWidth: "20%",
        maxWidth: "250px",
        borderRadius: "4px",
        display: "flex",
        flexDirection: "column",
        gap: 3,
        pt: 0,
        pb: 4,
        pl: 4,
        pr: 4
      }}
    />
  );

  return (
    <div className="App">
      <Box
        sx={{
          display: "flex",
          gap: "16px",
          minHeight: "250px"
        }}
      >
        {cardsData?.map((c, i) => (
          <Cards cardData={c} i={i} key={i} />
        ))}
        {/* extra card just cuz */}
        <Cards />
      </Box>
      <TableData />
    </div>
  );
}