Я работаю над вложенным макетом flexbox, который должен работать следующим образом:

Внешний уровень (ul#main) - горизонтальный список, который должен расширяться вправо, когда в него добавляется больше элементов. Если он становится слишком большим, должна быть горизонтальная полоса прокрутки.

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

Каждый пункт этого списка (ul#main > li) имеет заголовок (ul#main > li > h2) и внутренний список (ul#main > li > ul.tasks). Этот внутренний список является вертикальным и должен при необходимости переноситься в столбцы. При обтекании большего количества столбцов его ширина должна увеличиваться, чтобы освободить место для большего количества элементов. Это увеличение ширины должно применяться также к содержащемуся элементу внешнего списка.

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

Моя проблема в том, что внутренние списки не переносятся, когда высота окна становится слишком маленькой. Я пробовал много вмешиваться во все свойства flex, пытаясь следовать рекомендациям вCSS-Tricks дотошно, но не повезло.

этоJSFiddle показывает, что у меня так далеко.

Ожидаемый результат (что я хочу):

Фактический результат (что я получаю):

Более старый результат (что я получил в 2015 году):

ОБНОВИТЬ

После некоторого расследования это начинает выглядеть как большая проблема.Все основные браузеры ведут себя одинаково, и это не имеет ничего общего с моим дизайном flexbox. Еще более простые макеты столбцов flexbox отказываются увеличивать ширину списка при переносе элементов.

этодругой JSFiddle наглядно демонстрирует проблему. В текущих версиях Chrome, Firefox и IE11 все элементы переносятся правильно; высота списка увеличиваетсяrow режим, но его ширина не увеличиваетсяcolumn Режим. Кроме того, при изменении высотыcolumn режим, но есть вrow Режим.

Тем не менееофициальные спецификации(посмотрите конкретно на пример 5) кажется, указывают на то, что то, что я хочу сделать, должно быть возможным.

Может кто-нибудь придумать обходной путь к этой проблеме?

ОБНОВЛЕНИЕ 2

После многих экспериментов с использованием JavaScript для обновления высоты и ширины различных элементов во время событий изменения размера, я пришел к выводу, что это слишком сложно и слишком много проблем, чтобы попытаться решить его таким образом. Кроме того, добавление JavaScript определенно нарушает модель flexbox, которая должна быть максимально чистой.

Сейчас я отступаю кoverflow-y: auto вместоflex-wrap: wrap так что внутренний контейнер прокручивается вертикально при необходимости. Это не красиво, но это один из способов продвижения вперед, который, по крайней мере, не сильно нарушает удобство использования.