使Material UI Grid项的子项拉伸以适合父容器的剩余高度 [英] Make child of Material UI Grid item stretch to fit the remaining height of the parent container

问题描述

我有一个包含4个网格项的Material UI网格容器.每个网格项中都有一个版式组件，其中包含标题和带有某些内容的卡片，如下所示:

I have a Material UI Grid container with 4 Grid items. Within each Grid item is a Typography component containing a title and a Card with some content, as shown below:

我希望卡片填充网格项目的剩余高度，并且不要超过该高度.这是我想要的输出:

I would like the Cards to fill the remaining height of the Grid items and not exceed it. This is my desired output:

我尝试将卡片的高度设为100％，但这意味着每张卡片都采用其父卡片(网格项)的高度，而父卡片的高度=印刷+卡片(而不是剩余空间减去版式)，因此结果是，卡片随后超出了父网格项的高度，如下所示:

I have tried making the height of the Cards 100% but this means each Card takes on the height of its parent (the Grid item), and the height of the parent = Typography + Card (rather than the remaining space minus the Typography), so the result is that the Card then exceeds the height of the parent Grid item as below:

克服此问题的最佳方法是什么?我正在使用Material UI的Grid来简化断点并使其与项目的其余部分保持一致，因此理想情况下，解决方案将使用该方法.

What is the best way to overcome this problem? I'm using Material UI's Grid to make the breakpoints easy and consistent with the rest of my project, so ideally the solution would use that approach.

这是代码:

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;

非常感谢，

凯蒂

推荐答案

要解决此问题，您需要为每个单独的Grid Item设置一个高度.然后，您可以显示以列"的弯曲方向弯曲的网格项目.接下来，您可以像以前一样将卡的高度设置为100％.Material-UI网格中的默认显示机制未设置为可弯曲，因此，由于卡使用负边距之类的东西，因此卡将延伸到边框之外.

To solve this, you need to set a height for each individual Grid Item. Then you can display the Grid Item flexed with the flex-direction of "column". Next, you can set the height of the card to 100% as you had before. The default display mechanism in the Material-UI grid is not set to flex so the card will extend outside of the border since they use things like negative margins.

代码如下:

// 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 进行演示.

这篇关于使Material UI Grid项的子项拉伸以适合父容器的剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！