title: How to fill React Grid Layout item with material UI Card
body: <p>I'm using React Grid layout to display a grid of widgets. </p>
  
  <p>Here is my grid component : </p>
  
  <pre><code> class WidgetsGrid extends Component {
      render() {
        var layout = [
          { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
        ];
        var layouts = { lg: layout };
        return (
          &lt;ResponsiveReactGridLayout
            className="layout"
            layouts={layouts}
            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
            cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
          &gt;
            &lt;div key="a"&gt;
              &lt;FirstWidget /&gt;
            &lt;/div&gt;
          &lt;/ResponsiveReactGridLayout&gt;
        );
      }
    }
  </code></pre>
  
  <p>I display a child (FirstWidget) inside the grid :</p>
  
  <pre><code>class FirstWidget extends Component {
      render() {
        return (
          &lt;Card style={styles.main}&gt;
            &lt;IconActivity style={styles.activity} color={green500} /&gt;
            &lt;CardHeader title="Premier Widget" subtitle="Sous-titre" /&gt;
            &lt;CardText&gt;
              &lt;BarChart /&gt;
            &lt;/CardText&gt;
            &lt;div style={styles.footer}&gt;
              &lt;h6 style={styles.timeText}&gt;
                &lt;IconTime style={styles.iconText} /&gt;
                &lt;span&gt;Actualisé il y a 5 minutes&lt;/span&gt;
              &lt;/h6&gt;
            &lt;/div&gt;
          &lt;/Card&gt;
        );
      }
    }
  </code></pre>
  
  <p>The issue is that the display is not made properly and the FirstWidget card doesn't fill the div parent (div key="a") as you can see on the image below :</p>
  
  <p><a href="https://i.stack.imgur.com/xOJ2H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xOJ2H.jpg" alt="Display issue"></a></p>
  
  <p>So how I can resolve that ?</p>
  
  <p>Thank you for your help.</p>