I'm developing a nested Flexbox layout that works like this:

The outermost level (ul#main) is a horizontal list that must expand to the right when more items are added. If it gets too big, there should be a horizontal scrollbar.

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

Each item in this list (ul#main > li) has a header (ul#main > li > h2) and an inner list (ul#main > li > ul.tasks). This inner list is vertical and should wrap into columns when needed. As it wraps into more columns, its width should increase to make room for more items. This width increase should also apply to the containing items of the outer list.

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

My problem is that when the height of the window is too small, the inner list does not wrap. I tried a lot of tampering with all the Flex properties, trying to strictly follow CSS-Tricks' guidelines, but with no success.

This JSFiddle shows what I have so far.

Expected results(What I want):

Actual Result(What I got):

Older Results(Results I got in 2015):

renew

After some investigation, this started to look like a bigger problem.All major browsers behave the same way, this has nothing to do with my nested Flexbox design. Even the simpler Flexbox column layout does not increase the width of the list as items wrap.

Another JSFiddle clearly demonstrates the problem. In current versions of Chrome, Firefox, and IE11, all items wrap correctly; the height of the list increases inrowmode, but its width does not increase incolumnmode . Also, when changing the height of thecolumnmode, the element is not reflowed immediately at all, but it does happen in therowmode.

However, the official specification(see example 5 for details)seems to indicate that what I want to do should be possible.

Can anyone figure out a solution to this problem?

Update 2

After a lot of trying to use JavaScript to update the height and width of various elements during a resize event, I've come to the conclusion that trying to solve it this way is too complicated and cumbersome. Also, adding JavaScript will definitely break the Flexbox model, which should be kept as clean as possible.

Now, I fall back tooverflow-y: autoinstead offlex-wrap:wrapperso that the inner container scrolls vertically when needed. It's not pretty, but it's an approach that at least doesn't break usability too much.