Saltar al contenido

Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho

Solución:

El problema

Esto parece una deficiencia fundamental en el diseño flexible.

Un contenedor flexible en la dirección de la columna no se expandirá para acomodar columnas adicionales. (Esto no es un problema en flex-direction: row.)

Esta pregunta se ha hecho muchas veces (consulte la lista a continuación), sin respuestas claras en CSS.

Es difícil señalar esto como un error porque el problema ocurre en todos los navegadores principales. Pero plantea la pregunta:

¿Cómo es posible que todos los navegadores principales logren que el contenedor flexible se expanda en la envoltura en la dirección de la fila pero no en la dirección de la columna?

Uno pensaría que al menos uno de ellos lo haría bien. Solo puedo especular sobre el motivo. Tal vez fue una implementación técnicamente difícil y fue archivada para esta iteración.

ACTUALIZAR: El problema parece estar resuelto en Edge v16.

Ilustración del problema

El OP creó una demostración útil que ilustra el problema. Lo estoy copiando aquí: http://jsfiddle.net/nwccdwLw/1/

Opciones de solución alternativa

Soluciones hacky de la comunidad de Stack Overflow:

  • “Parece que este problema no se puede resolver solo con CSS, así que les propongo una solución JQuery”.

  • “Es curioso que la mayoría de los navegadores no hayan implementado correctamente los contenedores flexibles de columnas, pero el soporte para los modos de escritura es razonablemente bueno. Por lo tanto, puede usar un contenedor flexible de filas con un modo de escritura vertical”.

Más análisis

  • Informe de errores de cromo

  • La respuesta de Mark Amery

Otras publicaciones que describen el mismo problema

  • El ancho del contenedor de la caja flexible no aumenta
  • ¿Cómo puedo hacer que una pantalla: contenedor flexible se expanda horizontalmente con su contenido envuelto?
  • Flex-flow: envoltura de columna. ¿Cómo establecer el ancho del contenedor igual al contenido?
  • ¿Errores de envoltura de columna de flujo flexible Flexbox en cromo?
  • ¿Cómo uso “flex-flow: column wrap”?
  • El contenedor flexible no se expande cuando el contenido se envuelve en una columna
  • flex-flow: envoltura de columna, en una caja flexible que provoca el desbordamiento del contenedor principal
  • El contenedor html flexbox no se expande sobre los niños envueltos
  • ¿Contenedor Flexbox y niños flexibles desbordantes?
  • ¿Cómo puedo hacer un contenedor de caja flexible que se estire para adaptarse a los artículos envueltos?
  • Contenedor flexible que calcula una columna, cuando hay varias columnas
  • Haga el contenedor de ancho completo con flex
  • ¿Es posible cambiar el tamaño del contenedor Flexbox?
  • Flex-Wrap Inside Flex-Grow
  • Flexbox crece para contener
  • ¿Expandir el elemento flexbox a su contenido?
  • estirar la columna de flexbox para adaptarse al contenido
  • https://stackoverflow.com/q/48406237/3597276
  • flex-flow: la envoltura de la columna no estira el ancho del elemento principal
  • ¿Por qué no mi
      ampliar el ancho para cubrir todos los

    • ?
    • ¿Cómo ajustar el ancho cuando se envuelven las columnas de flexbox?
    • ¿La envoltura Flexbox no aumenta el ancho del padre?

    Llegó tarde a la fiesta, pero seguía encontrándome con este problema AÑOS después. Terminé encontrando una solución usando grid. En el contenedor puedes usar

    display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

    Tengo un ejemplo en CodePen que alterna entre el problema de flexbox y la corrección de la cuadrícula: https://codepen.io/MandeeD/pen/JVLdLd

    Encontré una solución alternativa de PURE CSS realmente impresionante aquí.

    https://jsfiddle.net/gcob492x/3/

    El complicado: set writing-mode: vertical-lr en la lista div entonces writing-mode: horizontal-tb en el elemento de la lista. Tuve que modificar los estilos en JSFiddle (eliminar muchos de los estilos de alineación, que no son necesarios para la solución).

    Nota: el comentario dice que solo funciona en navegadores basados ​​en Chromium y no en Firefox. Solo lo he probado personalmente en Chrome. Es posible que haya una manera de modificar esto para que funcione en otros navegadores o que haya actualizaciones en dichos navegadores que hagan que esto funcione.

    Un gran saludo a este comentario: cuando los elementos de flexbox se ajustan en modo columna, el contenedor no aumenta su ancho. Examinar ese hilo de problemas me llevó a https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39, lo que me llevó a este JSFiddle.

    ¡Haz clic para puntuar esta entrada!
    (Votos: 0 Promedio: 0)

    Tags : / / /

    Utiliza Nuestro Buscador

    Preguntas Relacionadas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *