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

I'm working on the nested flexbox layout which should work as follows:

The maximum level (< Code> ul # main ) is a horizontal list that needs to be expanded on the right when adding more objects in it. If it gets too large, then there should be a horizontal scroll bar.

  #main {display: flex; Flex-direction: line; Flex-wrap: Abrop; Overflow-X: Auto; / * ... and more ... * /  

Each item in this list ( ul # main> li ) contains the header ( Ul # main> gt> h2 ) and an internal list ( ul # main> gt> ul.tasks ). This internal listing is vertical and wrap it in columns when necessary. When wrapping in more columns, it should increase its width to make room for more items. The increase in this width should also be applied to the item containing the external list.

 . Task {Flex-direction: column; Flex-wrap: rap; / * ... and more ... * /}  

My problem is that the window does not wrap the list when the height of the window becomes too small. I have tried to tamper with all the flex qualities, which are carefully trying to follow the guidelines, but there is no luck.

It shows what I still have.

Expected Result (What I Need) :

Actual Results (what i get) :

UPDATE

After some investigation, it looks like a big problem is triggered. All major browsers behave the same way , and have nothing to do with the nesting of my Flexbox design, even simple Flexbox columns deny layouts to increase the width of the list. When the items are wrapped.

This clearly indicates the problem that in existing versions of Chrome, Firefox and IE11, all the items wrap correctly; The height of the list increases in line mode, but its width does not increase in column mode Also, when changing the height of the column mode, But elements in the row mode do not have any immediate reflow.

However, it indicates what I want to do is possible.

Can anyone come up with a solution to this problem?

Update 2

Many experiments using javascript to update the height and width of different elements during the resizing events, I came to the conclusion I am very complicated and in this way there is a lot of trouble in trying to solve it. In addition, adding Javascript breaks the Flexbox model, which should be kept as clean as possible.

For now, I prefer overflow-y: auto instead of flex-wrap: wrap so that it is not necessary if the internal container scroll is vertical But it is in a way forward that at least does not break much utility.