When flexbox items wrap in column mode, container does not grow its width

Question

I am working on a nested flexbox layout which should work as follows:

The outermost level (ul#main) is a horizontal list that must expand to the right w

Answer 1

Late to the party, but was still running into this issue YEARS later. Ended up finding a solution using grid. On the container you can use

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

I have an example on CodePen that toggles between the flexbox issue and the grid fix: https://codepen.io/MandeeD/pen/JVLdLd