Ich entwickle ein verschachteltes Flexbox-Layout, das so funktioniert:

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 auf dieser Liste (ul#main > li) 都有一个标头 (ul#main > li > h2) 和一个内部列表 (ul#main > li > ul.tasks). Diese innere Liste ist vertikal und sollte bei Bedarf in Spalten umgebrochen werden. Wenn es in mehr Spalten aufgeteilt wird, sollte seine Breite zunehmen, um Platz für mehr Elemente zu schaffen. Diese Breitenzunahme sollte auch für die enthaltenden Elemente der äußeren Liste gelten.

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

Mein Problem ist, dass die innere Liste nicht umgebrochen wird, wenn die Höhe des Fensters zu klein ist. Ich habe viele Versuche unternommen, alle Flex-Eigenschaften zu manipulieren und mich strikt an die Richtlinien von CSS-Tricks zu halten, aber ohne Erfolg.

Dieses JSFiddle zeigt, was ich bisher habe.

Erwartete Ergebnisse (was ich will):

Tatsächliche Ergebnisse (was ich bekommen habe):

Ältere Ergebnisse (Ergebnisse, die ich 2015 erhalten habe):

Update

Nach einigen Nachforschungen schien dies ein größeres Problem zu sein. Alle gängigen Browser verhalten sich gleich, das hat nichts mit meinem verschachtelten Flexbox-Design zu tun. Selbst das einfachere Flexbox-Spaltenlayout erhöht nicht die Breite der Liste, wenn Elemente umbrochen werden.

Eine weitere JSFiddle zeigt das Problem deutlich. In aktuellen Versionen von Chrome, Firefox und IE11 erfolgt der korrekte Umbruch aller Elemente im row 模式下列表的高度会增加，但在 column 模式下其宽度不会增加。另外，当更改 column 模式的高度时，根本不会立即回流元素，但在 row-Modus.

Allerdings scheint die offizielle Spezifikation (Einzelheiten siehe Beispiel 5) 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 viele Versuche unternommen habe, JavaScript zu verwenden, um die Höhe und Breite verschiedener Elemente bei Größenänderungsereignissen zu aktualisieren, bin ich zu dem Schluss gekommen, dass der Versuch, das Problem auf diese Weise zu lösen, zu kompliziert und umständlich ist. Außerdem wird das Hinzufügen von JavaScript definitiv das Flexbox-Modell beschädigen, das so sauber wie möglich gehalten werden sollte.

Jetzt gehe ich zurück zu overflow-y: auto 而不是 flex-wrap:wrapper, damit der Innenbehälter bei Bedarf vertikal scrollt. Es ist nicht schön, aber es ist ein Ansatz, der die Benutzerfreundlichkeit zumindest nicht zu sehr beeinträchtigt.