title: MaterialUI Grid in flex container not stretching enough for content
body: <p>During my process of learning MaterialUI I encountered an issue with Grid component. When nesting the Grid container in a flex element with <code>align-items: center;</code> the Grid row is behaving in strange manner. With one row it's often overlaping columns (even though there's a lot of space around it). When adding enough elements to form second column suddenly it expands vastly, but still not enough to prevent overlap. When provided with long value inside it prefers to wrap it instead of expanding the row.</p>
  <p>Here I've prepared an jsfiddle presenting this issue. <a href="https://jsfiddle.net/cau8wd5q/7/" rel="nofollow noreferrer">https://jsfiddle.net/cau8wd5q/7/</a></p>
  <p>One solution is using the <code>align-items: stretch;</code>.</p>
  <p><strong>GOAL</strong>:I'd prefer Grid taking as little space as possible while still trying to fit every column in one line instead of wraping and wrap only if it's not possible.</p>
  <p>Is it possible to do it using MaterualUI Grid? There's a high chance I'm missing something obvious.</p>
  <p><a href="https://i.stack.imgur.com/V8o9L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V8o9L.png" alt="Grid component in flex container" /></a></p>