Discussion: 06-shopping-cart CSS

Buenas,
Me permito abrir una issue para aclarar una duda en el CSS que no está muy clara. De hecho, se le ve dubitativo al propio Miguel durante el directo.
También me he permitido traladar el codigo a un sandbox por si alguien quiere probar rapidamente el cambio al activar y desactivar el flex container.

https://codesandbox.io/s/headless-paper-m7i8r4?file=/src/components/Products.css

Para enfatizar el efecto he aumentado el max-width del #root a 1200px

CODE:
Las líneas de código son las siguientes:

aprendiendo-react/projects/06-shopping-cart/src/components/Products.css

Lines 1 to 6 in a75a5d5

    
           .products { 
        
             width: 100%; 
        
             display: flex; 
        
             justify-content: center; 
        
             align-items: center; 
        
           }

ISSUE:
Un contenedor flex envuelve a un grid

WHY IS AN ISSUE:
El flex container que envuelve al grid container hace que el grid se limite a dos columnas, y pase a 1 en pantallas pequeñas. Pero a mi parecer elimina el efecto repeat autofit min max del grid.

MEDIA
Flex container desactivado
Screencast from 17-02-2023 09:37:05.webm
Flex container activado

Gracias de antemano

	.products {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}