Para tal caso donde el sitio se ha roto y los elementos sobrepasan el margen del color de fondo. Se puede solucionar colocando en el padre los siguientes elementos:
colocar un height con un valor determinado para que este a la hora de setear un flex-wrap sea el que ejecute la accion que por cada valor de height quiebre o doble el dato al lado del dato o columna anterior y asi sucesivamente manteniendo toda la lista ordenada de forma vertical por cada area
¡Hola Silvia!
Para solucionar el problema de que los elementos sobrepasen el margen del color de fondo en un diseño de columnas utilizando Flexbox, puedes utilizar la propiedad flex-wrap en el contenedor padre. Esta propiedad permite controlar cómo se distribuyen los elementos cuando no hay suficiente espacio horizontal.
Por ejemplo, si quieres que los elementos se distribuyan en columnas y se vayan moviendo a la siguiente columna cuando no haya suficiente espacio, puedes utilizar flex-wrap: wrap en el contenedor padre. Esto hará que los elementos se vayan colocando en columnas adicionales a medida que se llenen las anteriores.
Aquí tienes un ejemplo de cómo se vería el código CSS:
.contenedor-padre {
display: flex;
flex-wrap: wrap;
}
Recuerda que también puedes ajustar el tamaño de los elementos utilizando otras propiedades de Flexbox, como flex-basis o flex-grow, para lograr el diseño deseado.
Espero que esta solución te sea útil. ¡Si tienes alguna otra pregunta, estaré encantado de ayudarte! ¡Espero haber ayudado y buenos estudios!