javascript - 使 Material UI Grid 元素的子项拉伸(stretch)以适应父容器的剩余高度

Question

1.目前的外观
我有一个带有 4 个网格项的 Material UI Grid 容器。每个 Grid 项中都有一个 Typography 组件，其中包含一个标题和一个带有一些内容的 Card，如下所示:

2. 想要的外观
我希望卡片填充网格元素的剩余高度并且不超过它。这是我想要的输出:

3. 外观不理想(卡片高度 = 100%)
我尝试将卡片的高度设置为 100%，但这意味着每张卡片都采用其父级(网格元素)的高度，并且父级的高度 = 排版 + 卡片(而不是剩余空间减去排版)，所以结果是 Card 然后超过了父 Grid 元素的高度，如下所示:

克服这个问题的最佳方法是什么？我正在使用 Material UI 的 Grid 使断点变得简单且与我的元素的其余部分保持一致，因此理想情况下，解决方案将使用这种方法。
这是代码:

import React from 'react';

const useStyles = makeStyles(theme => ({
   // stretch: { height: '100%' }, // Un-commenting this results in undesirable appearance 3 (see image 3 above)
    outline: { border: '1px solid red' },
}));

const Sections= () => {
  const classes = useStyles();

  return (
    <Grid container spacing={3} justify="space-between" alignItems="stretch" className={classes.outline}>
      <Grid item xl={2} lg={2} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 1</Typography>
          <Card className={classes.stretch}><CardContent>Lots and lots and lots and lots and lots and lots of content</CardContent></Card>
      </Grid>
   <Grid item xl={4} lg={4} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 2</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
   <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 3</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
   <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 4</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
</Grid>
  );
};


export default Sections;

非常感谢，
凯蒂

Answer 1

为了解决这个问题，您需要为每个单独的 Grid Item 设置一个高度。然后您可以显示以“列”的 flex-direction flex 的 Grid Item。接下来，您可以像以前一样将卡片的高度设置为 100%。 Material-UI 网格中的默认显示机制未设置为 flex，因此卡片将延伸到边框之外，因为它们使用负边距之类的东西。
代码如下:

// imports omitted

const useStyles = makeStyles(theme => ({
  stretch: { height: "100%" },
  item: { display: "flex", flexDirection: "column" } // KEY CHANGES
}));

export const Sections = () => {
  return (
    <Grid container spacing={2} justify="space-between" alignItems="stretch">
      <Item xl={2} lg={2} md={6} xs={12} title="Big Title 1" content="Lots and lots and lots and lots and lots and lots of content!" />
      <Item xl={4} lg={4} md={6} xs={12} title="Big Title 2" content="Not much content" />
      <Item xl={3} lg={3} md={6} xs={12} title="Big Title 3" content="Not much content" />
      <Item xl={3} lg={3} md={6} xs={12} title="Big Title 4" content="Not much content" />
    </Grid>
  );
}

const Item = ({ title, content, ...rest }) => {
  const classes = useStyles();

  return (
    <Grid className={classes.item} item {...rest}>
      <Typography>{title}</Typography>
      <Card className={classes.stretch}>
        <CardContent>{content}</CardContent>
      </Card>
    </Grid>
  );
};

结帐stackblitz一个活生生的例子。