如何在material-ui中使一张卡片的高度与其他卡片的高度相同？

Question

我正在尝试使用 3 张具有相同高度的水平卡片，并且它必须具有响应性。那么问题来了，如果一张卡片的内容比另一张大，那么卡片的高度就不一样了，一张卡片的高度看起来比另一张大。所以我一般想要这3张卡片的高度固定，这样无论内容是少还是多，3张卡片的高度都必须相同。

我在此使用“Material-UI”并使用其中的 Card 组件。

<Grid container spacing={2}>
 <Grid item>
   <Card>
     Card 1
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 2
   </Card>
 </Grid>
<Grid item>
   <Card>
     Card 3
   </Card>
 </Grid>
</Grid>

如果我尝试使用 Grid 的组件作为“卡片”，那么它可以正常工作，所有卡片的高度都是恒定的，无论它们里面是否存在内容。但是我无法提供卡之间的间距，因此结构看起来非常紧凑。

<Grid container spacing={2}>
 <Grid item component="Card">
     Card 1
 </Grid>
<Grid item component="Card">
     Card 2
 </Grid>
<Grid item component="Card">
     Card 3
 </Grid>
</Grid>

Answer 1

你可以试试

<Card style={{ height: '100%' }}>