我是新来的。我已经尝试了不同的组件，如网格组件，但高度响应似乎不工作，如果它在一个CardContent的内部。现在我尝试堆栈组件。有没有办法，我的堆栈将做一个新的行在CardContent如果我的芯片组件水平溢出，而不是使水平滚动？我也可以，如果解决方案使用网格组件

我的代码是这样的

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

<CardContent sx={{pt: .5, pb: .5, overflow: 'auto'}}>
    <Stack direction="row" spacing={1}>
        {
            <>
            <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>