Высота содержимого карты пользовательского интерфейса / содержание карты зафиксировано снизу

Question

В настоящее время я картографирую карты материала-пользовательского интерфейса, которые получают информацию от объекта JSON, поэтому информация в нем время от времени будет изменяться и занимать разное количество места. Я хотел иметь фиксированную высоту для каждой карты, которую я выполнил, однако содержание не соответствует.

Скриншот того, как это выглядит

У меня все карты в строках по три. Как вы можете видеть, содержимое последней карты не совпадает с другим 2. Я хотел бы, чтобы кнопка и график были прикреплены к нижней части карты или даже имели фиксированную высоту для содержимого над графиками, поэтому график и кнопка находится на месте внизу. Я изо всех сил пытался заставить его работать. Любая помощь будет принята с благодарностью.

Вот мой код:

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary">
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

И это для стилей:

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
}));

Answer 1

Вот вам go с решением

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  cards: {
    padding: theme.spacing(2),
    height: "95%",
  },
  details: {
    display: "flex",
    flexDirection: "column",
  },
  space: {
    marginTop: theme.spacing(1),
  },
  question: {
    overflow: "hidden",
    display: "-webkit-box",
    WebkitLineClamp: 2,
    WebkitBoxOrient: "vertical"
  }
}));

<Grid key={item.Qid} item xs={12} sm={4}>
  <Card className={classes.cards}>
    <div className={classes.details}>
      <CardContent>
        <Typography component="h5" variant="h5" align="center">
          Question
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Qid}
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" className={classes.question}>
          {item.Question}
        </Typography>
        <Typography component="h5" variant="h5" align="center" className={classes.space}>
          Sentiment
        </Typography>
        <Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
          {item.Sentiment}
        </Typography>
      </CardContent>

      <CardMedia className={classes.cover}>
        {item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
      </CardMedia>

      <div align="center" className={classes.space}>
        <Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
          Answers
        </Button>
      </div>
    </div>
  </Card>
</Grid>;

question класс ограничит количество строк до 2.