React+MUI中溢出卡片的同级表格如何匹配总宽度？

希望蓝色Table的宽度与动态数量的Cards总宽度保持一致，不想通过手动计算宽度增加复杂度，如何让父容器或同级元素自动匹配溢出Cards的宽度？

核心是让Cards的总宽度决定外层容器的宽度，Table直接继承该宽度，无需计算。具体实现步骤如下：

• 给包裹Cards和Table的最外层容器设置display: inline-block + min-width: 100%：既让容器被Cards总宽度撑开，又保证内容不足时占满屏幕。
• 给每个Card添加flexShrink: 0：防止卡片被flex容器压缩，保持设置的宽度范围。
• 给Cards容器添加overflowX: auto：卡片过多时允许横向滚动，同时Table会匹配Cards的总宽度。

修改后的完整代码：

import "./styles.css";
import React from "react";

import {
  Box,
  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 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,
        flexShrink: 0 // 禁止卡片被压缩
      }}
    />
  );

  return (
    <div className="App" style={{ display: "inline-block", minWidth: "100%", verticalAlign: "top" }}>
      <Box
        sx={{
          display: "flex",
          gap: "16px",
          minHeight: "250px",
          overflowX: "auto" // 卡片过多时允许横向滚动
        }}
      >
        {cardsData?.map((c, i) => (
          <Cards cardData={c} i={i} key={i} />
        ))}
        <Cards />
      </Box>
      <TableData />
    </div>
  );
}

关键说明 #

• 外层容器的inline-block：打破默认块级元素占满父容器的特性，让容器宽度由内部Cards的总宽度决定。
• min-width: 100%：避免当Cards总宽度小于屏幕时，Table宽度随之变窄，保证基础的满屏显示。
• flexShrink: 0：确保每个Card严格遵守设置的min-width和max-width，不会被flex容器挤压变形。
• overflowX: auto：当Cards总宽度超出屏幕时，自动出现横向滚动条，同时Table会匹配Cards的总宽度，不会被截断。

内容的提问来源于stack exchange，提问作者reef