React：如何实现CardContent高度自适应及Chip组件溢出换行

方案一：使用Stack组件实现换行 #

给Stack组件添加flexWrap: 'wrap'样式，同时移除CardContent的overflow: 'auto'（避免出现滚动条）：

<Card sx={{mt: 1, mb: 1}}>
  <CardHeader
      sx={{pt: .5, pb: .5}}
      action={
          <Button>Add Person (WIP)</Button>
      }
  />

  <CardContent sx={{pt: .5, pb: .5}}>
      <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
          <>
          <Chip label="Person Name"/>
          <Chip label="Person Name2"/>
          <Chip label="Person Name3"/>
          <Chip label="Person Name4"/>
          <Chip label="Person Name5"/>
          <Chip label="Person Name6"/>
          <Chip label="Person Name7"/>
          <Chip label="Person Name8"/>
          <Chip label="Person Name9"/>
          <Chip label="Person Name10"/>
          <Chip label="Person Name11"/>
          <Chip label="Person Name12"/>
          </>
      </Stack>
  </CardContent>
</Card>

方案二：使用Grid组件实现响应式换行 #

用Grid容器包裹Chip，每个Chip设置为xs="auto"的Grid Item，让元素宽度自适应并自动换行：

<Card sx={{mt: 1, mb: 1}}>
  <CardHeader
      sx={{pt: .5, pb: .5}}
      action={
          <Button>Add Person (WIP)</Button>
      }
  />

  <CardContent sx={{pt: .5, pb: .5}}>
      <Grid container spacing={1}>
          <>
          <Grid item xs="auto"><Chip label="Person Name"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name2"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name3"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name4"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name5"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name6"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name7"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name8"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name9"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name10"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name11"/></Grid>
          <Grid item xs="auto"><Chip label="Person Name12"/></Grid>
          </>
      </Grid>
  </CardContent>
</Card>

关键说明 #

• Stack方案核心是开启flexWrap: 'wrap'，利用Flex布局的自动换行特性
• Grid方案通过xs="auto"让每个Grid Item根据内容宽度自适应，容器会自动换行排列
• 两种方案都需要移除CardContent的overflow: 'auto'，避免横向滚动条出现

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