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

Estoy trabajando en un diseño de caja flexible anidado que debería funcionar de la siguiente manera:

El nivel más externo ( ul#main) es una lista horizontal que debe expandirse hacia la derecha cuando se le agregan más elementos. Si crece demasiado, debería haber una barra de desplazamiento horizontal.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

Cada elemento de esta lista ( ul#main > li) tiene un encabezado ( ul#main > li > h2) y una lista interna ( ul#main > li > ul.tasks). Esta lista interna es vertical y debe ajustarse a columnas cuando sea necesario. Al envolver en más columnas, su ancho debe aumentar para dejar espacio para más elementos. Este aumento de ancho debería aplicarse también al elemento contenedor de la lista externa.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

Mi problema es que las listas internas no se ajustan cuando la altura de la ventana es demasiado pequeña. He intentado muchas manipulaciones con todas las propiedades flexibles, tratando de seguir meticulosamente las pautas de CSS-Tricks , pero no tuve suerte.

Este JSFiddle muestra lo que tengo hasta ahora.

Resultado esperado (lo que quiero) :

Resultado real (lo que obtengo) :

Resultado anterior (lo que obtuve en 2015) :

ACTUALIZAR

Después de algunas investigaciones, esto comienza a parecer un problema mayor. Todos los navegadores principales se comportan de la misma manera , y no tiene nada que ver con que mi diseño de flexbox esté anidado. Incluso los diseños de columna de flexbox más simples se niegan a aumentar el ancho de la lista cuando los elementos se ajustan.

Este otro JSFiddle demuestra claramente el problema. En las versiones actuales de Chrome, Firefox e IE11, todos los elementos se ajustan correctamente; la altura de la lista aumenta en el rowmodo, pero su ancho no aumenta en el columnmodo. Además, no hay ningún reflujo inmediato de elementos cuando se cambia la altura de un columnmodo, pero sí en rowmodo.

Sin embargo, las especificaciones oficiales (mire específicamente el ejemplo 5) parecen indicar que lo que quiero hacer debería ser posible.

¿Alguien puede encontrar una solución a este problema?

ACTUALIZACIÓN 2

Después de experimentar mucho usando JavaScript para actualizar la altura y el ancho de varios elementos durante los eventos de cambio de tamaño, he llegado a la conclusión de que es demasiado complejo y demasiado complicado intentar resolverlo de esa manera. Además, agregar JavaScript definitivamente rompe el modelo de flexbox, que debe mantenerse lo más limpio posible.

Por ahora, estoy retrocediendo en overflow-y: autolugar de flex-wrap: wrappara que el contenedor interno se desplace verticalmente cuando sea necesario. No es bonito, pero es un camino a seguir que al menos no rompe demasiado la usabilidad.

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 identificar 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 dirección de fila pero no en dirección de columna?

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

ACTUALIZACIÓN: 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 de JQuery".

• "Es curioso que la mayoría de los navegadores no hayan implementado los contenedores flexibles de columna correctamente, pero el soporte para los modos de escritura es razonablemente bueno. Por lo tanto, puede utilizar 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 [duplicado]
• ¿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? [duplicar]
• ¿Errores de envoltura de columna de flujo flexible Flexbox en cromo?
• ¿Cómo utilizo “flex-flow: column wrap”?
• El contenedor flexible no se expande cuando el contenido se ajusta en una columna
• flex-flow: envoltura de columna, en una caja flexible que provoca el desbordamiento del contenedor principal
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• ¿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
• Hacer contenedor de ancho completo con flex [duplicar]
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• Flex-Wrap Inside Flex-Grow
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• estirar la columna de flexbox para ajustar el contenido [duplicado]
• https://iquestion.pro/es/q/so61404035/cuando-los-elementos-de-flexbox-se-envuelven-en-modo-columna-el-contenedor-no-aumenta-su-ancho
• flex-flow: la envoltura de la columna no estira el ancho del elemento principal [duplicado]
• ¿Por qué mi <ul> no expande el ancho para cubrir todo el <li>? [duplicar]
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho
• Cuando los elementos de flexbox se envuelven en modo columna, el contenedor no aumenta su ancho

Llegó tarde a la fiesta, pero todavía me encontré 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 PURE CSS realmente impresionante aquí.

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

El truco: establecer writing-mode: vertical-lren la lista div y luego writing-mode: horizontal-tben 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 forma 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 envuelven 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.

Es lamentable que muchos navegadores importantes sufran este error después de muchos años. Considere una solución alternativa de Javascript. Siempre que la ventana del navegador cambie de tamaño o se agregue contenido al elemento, ejecute este código para que cambie de tamaño al ancho adecuado. Puede definir una directiva en su marco para que lo haga por usted.

    element.style.flexBasis = "auto";
    element.style.flexBasis = `${element.scrollWidth}px`;