¿Qué tenemos que hacer ahora para arreglar esta situación?

¡Hola Jose!

Para arreglar la situación que mencionas, debes utilizar la propiedad "flex-wrap" con el valor "wrap". Esta propiedad te permite controlar cómo se comportan los elementos flexibles cuando no tienen suficiente espacio en la línea.

Por ejemplo, si tienes un contenedor con varios elementos flexibles y no quieres que se desborden fuera del contenedor cuando el espacio es limitado, puedes aplicar la propiedad "flex-wrap: wrap". Esto hará que los elementos se envuelvan en líneas adicionales dentro del contenedor en lugar de desbordarse.

Aquí tienes un ejemplo de cómo se vería el código:

.contenedor {
  display: flex;
  flex-wrap: wrap;
}

Recuerda que esta propiedad solo tiene efecto si el contenedor tiene un ancho definido o si está dentro de otro contenedor con un ancho definido.

¡Espero haber ayudado y buenos estudios!