title: Unexpected empty space using MaterialUI Grid
body: <p>I'm using the material UI react components, particularly the problem seems to be about the <a href="https://material-ui.com/api/grid/" rel="nofollow noreferrer">Grid component</a>. I'm getting a very weird space as shown in the image and I cannot find out where it is coming from.</p>
  
  <p>I've reduced the problem to the minimum possible and now it's just a Grid inside a Grid that contains two images.</p>
  
  <pre><code>&lt;Grid container direction={"column"} style={{ "background-color": "red" }}&gt;
    &lt;Grid item&gt;
      &lt;Grid container style={{ "background-color": "blue" }}&gt;
        &lt;Grid item xs={11} style={{ "background-color": "purple" }}&gt;
          &lt;CustomImg /&gt;
          &lt;CustomImg /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CI0az.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CI0az.png" alt="space in Grid"></a>
  <strong>I don't understand where the <em>red</em> space is coming from.</strong></p>
  
  <p><strong>A clue</strong>: If I change the <code>&lt;Grid item xs={11}</code> to be <code>xs={12}</code> or remove the whole <code>xs={...}</code> then the space goes away....</p>
  
  <p>Here is the codesanbox so you can hopefully tell me what I am doing wrong:
  <a href="https://codesandbox.io/s/x7q8q0rr5z" rel="nofollow noreferrer">https://codesandbox.io/s/x7q8q0rr5z</a></p>