Wenn Flexbox-Elemente im Spaltenmodus umbrochen werden, vergrößert der Container seine Breite nicht

Ich arbeite an einem verschachtelten Flexbox-Layout, das wie folgt funktionieren sollte:

Die äußerste Ebene (ul#main) ist eine horizontale Liste, die nach rechts erweitert werden muss, wenn weitere Elemente hinzugefügt werden. Wenn es zu groß wird, sollte es eine horizontale Bildlaufleiste geben.

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

Jedes Element dieser Liste (ul#main > li) hat eine Kopfzeile (ul#main > li > h2) und eine innere Liste (ul#main > li > ul.tasks). Diese innere Liste ist vertikal und sollte bei Bedarf in Spalten umgebrochen werden. Wenn Sie mehr Spalten einschließen, sollte die Breite zunehmen, um Platz für mehr Elemente zu schaffen. Diese Breitenerhöhung sollte auch für das enthaltende Element der äußeren Liste gelten.

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

Mein Problem ist, dass die inneren Listen nicht umgebrochen werden, wenn die Höhe des Fensters zu klein wird. Ich habe viele Manipulationen an all den Flex-Eigenschaften versucht und versucht, die Richtlinien unter CSS-Tricks genau zu befolgen, aber kein Glück.

Diese JSFiddle zeigt, was ich bisher habe.

Erwartetes Ergebnis (was ich will):

Tatsächliches Ergebnis (was ich bekomme):

Älteres Ergebnis (was ich 2015 bekommen habe):

AKTUALISIEREN

Nach einigen Nachforschungen scheint dies ein größeres Problem zu sein. Alle gängigen Browser verhalten sich gleich , und es hat nichts damit zu tun, dass mein Flexbox-Design verschachtelt ist. Noch einfachere Flexbox-Spaltenlayouts weigern sich, die Breite der Liste zu erhöhen, wenn die Elemente umbrochen werden.

Diese andere JSFiddle demonstriert das Problem deutlich. In den aktuellen Versionen von Chrome, Firefox und IE11 werden alle Elemente korrekt umbrochen. Die Höhe der Liste erhöht sich im Modus rowname__, die Breite jedoch nicht im Modus columnname__. Außerdem erfolgt beim Ändern der Höhe eines columnname__-Modus überhaupt kein sofortiger Rückfluss von Elementen, aber im rowname__-Modus.

Die offiziellen Angaben (siehe speziell Beispiel 5) scheinen jedoch darauf hinzudeuten, dass das, was ich tun möchte, möglich sein sollte.

Kann jemand eine Lösung für dieses Problem finden?

UPDATE 2

Nachdem ich viel mit JavaScript experimentiert habe, um die Höhe und Breite verschiedener Elemente während Größenänderungsereignissen zu aktualisieren, bin ich zu dem Schluss gekommen, dass es zu komplex und zu schwierig ist, es auf diese Weise zu lösen. Das Hinzufügen von JavaScript bricht definitiv das Flexbox-Modell, das so sauber wie möglich gehalten werden sollte.

Im Moment greife ich auf overflow-y: auto anstelle von flex-wrap: wrap zurück, sodass der innere Container bei Bedarf vertikal gescrollt wird. Es ist nicht schön, aber es ist ein Weg nach vorne, der die Benutzerfreundlichkeit zumindest nicht allzu sehr beeinträchtigt.