During my process of learning MaterialUI I encountered an issue with Grid component. When nesting the Grid container in a flex element with align-items: center; 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.

Here I've prepared an jsfiddle presenting this issue. https://jsfiddle.net/cau8wd5q/7/

One solution is using the align-items: stretch;.

GOAL: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.

Is it possible to do it using MaterualUI Grid? There's a high chance I'm missing something obvious.