title: React.js Material UI - CardActionArea with flex display - children elements don't use full width
body: <p>Straight to the point - I've tried replacing <code>display</code> style parameter from <code>block</code> to <code>flex</code>, with <code>flexDirection: 'column'</code> for <code>CardActionArea</code> component. The reason for this was to make sure that <code>CardContent</code> has the same height for every <code>Card</code> in a row - which I achieved. However... <code>CardHeader</code> and <code>CardContent</code> fail to achieve <code>width: '100%'</code> after changing the <code>display</code>. The illustration below should clarify what I mean.</p>
  
  <p><a href="https://i.stack.imgur.com/Kc3KX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kc3KX.png" alt="enter image description here"></a>
  The following is the related code</p>
  
  <p><strong>render</strong></p>
  
  <pre><code>&lt;Card className={classes.card}&gt;
    &lt;CardActionArea
      className={classes.cardActionArea}
      onClick={this.loadGroup}
    &gt;
      &lt;CardHeader
        avatar={
          &lt;FolderIcon /&gt;
        }
        classes={{
          root: classes.header,
          title: classes.headerTitle,
          subheader: classes.headerSubheader
        }}
        title={this.state.group.name}
        subheader={this.renderModuleCount()}
      /&gt;
      &lt;CardContent className={classes.content}&gt;
        {this.renderContent()}
      &lt;/CardContent&gt;
    &lt;/CardActionArea&gt;
    &lt;CardActions className={classes.actions}&gt;
      &lt;IconButton onClick={this.showDialog}&gt;
        &lt;DeleteIcon /&gt;
      &lt;/IconButton&gt;
    &lt;/CardActions&gt;
  &lt;/Card&gt;
  </code></pre>
  
  <p><strong>styles</strong></p>
  
  <pre><code>card: {
    width: '30%',
    margin: theme.spacing(1),
    display: 'flex',
    flexDirection: 'column',
  },
  cardActionArea: {
    flexGrow: 1,
    display: 'flex',
    flexDirection: 'column'
  },
  header: {
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText,
    width: '100%',
  },
  headerTitle: {
    color: theme.palette.secondary.contrastText,
  },
  headerSubheader: {
    color: theme.palette.secondary.contrastText,
  },
  content: {
    flexGrow: 1,
  },
  </code></pre>
  
  <p>I'm looking to see how I could resolve this. I couldn't find any <code>padding</code> or <code>margin</code> on <code>ButtonBase</code>, <code>CardActionArea</code> MUI components.</p>