Set Material UI card to max height

Question

I am using Material UI Card as seen here .

I want to set these cards to a maximum height, nicely handling the text and pictures inside. How would I do this?

Here is some code:

 <Card className={classes.card} >
        <CardHeader
          avatar={
            <Avatar aria-label={authorAvatar} src={authorImg} className={classes.avatar}/>
          }
          action={
            <Fieldset className={classes.date}>
              {postDate}
            </Fieldset>
          }
          title={post.title}          
          subheader={
            <Link to={userUrl}>
              {authorName}
            </Link>
          }
        />
        <CardContent>
          <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(bodyHtml)}}></div>
        </CardContent>
        <CardActions className={classes.actions} disableActionSpacing>
          <IconButton
            className={classnames(classes.unliked, {
              [classes.liked]: this.state.liked,
            })}
            aria-label="Add to favorites"
            onClick={this.handleFavourite}
          >

I am trying to use sizing and maxHeight, but I cannot get the syntax right.

import  maxHeight from '@material-ui/system/sizing';

<CardContent maxHeight = "10">

This gives several errors.

Do I put it here?

const styles = theme => ({
  card: {
    marginTop: 20,
    maxHeight: 300,
  },

Answer 1

I got this working in the following way:

import { sizing }  from '@material-ui/system/';

const styles = theme => ({
  card: {
    marginTop: 20,
    sizing, maxHeight: 300,
  },