Durante mi proceso de aprendizaje de MaterialUI, encontré un problema con el componente Grid. Al anidar el contenedor Grid en un elemento flexible con elementos de align-items: center; la fila de cuadrícula se comporta de manera extraña. Con una fila, a menudo se superponen las columnas (aunque hay mucho espacio a su alrededor). Al agregar suficientes elementos para formar la segunda columna, de repente se expande enormemente, pero aún no lo suficiente como para evitar la superposición. Cuando se le proporciona un valor largo dentro, prefiere envolverlo en lugar de expandir la fila.

Aquí he preparado un jsfiddle que presenta este problema. https://jsfiddle.net/cau8wd5q/7/

Una solución es usar los align-items: stretch; .

OBJETIVO : Preferiría que Grid ocupara el menor espacio posible mientras intentaba ajustar cada columna en una línea en lugar de ajustar y ajustar solo si no es posible.

¿Es posible hacerlo usando MaterualUI Grid? Hay una alta probabilidad de que me esté perdiendo algo obvio.