Der Container vergrößert seine Breite nicht, wenn das Flexbox-Element im Spaltenmodus umbrochen wird

Question

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.

Answer 1

聚会迟到了，但几年后仍然遇到这个问题。最终找到了使用网格的解决方案。在容器上您可以使用

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

我在 CodePen 上有一个在 Flexbox 问题和网格修复之间切换的示例：https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

问题

这看起来像是弹性布局的一个根本缺陷。

列方向的弹性容器不会扩展以容纳额外的列。 （这在 flex-direction: row 中不是问题。）

这个问题已被问过很多次（见下面的列表），CSS 中没有明确的答案。

很难将此确定为错误，因为所有主要浏览器都会出现该问题。但这确实提出了一个问题：

你会认为他们中至少有一个人会做对。我只能推测原因。也许这是一个技术上困难的实现，因此在本次迭代中被搁置。

更新：该问题似乎已在 Edge v16 中得到解决。

---

问题说明

OP 创建了一个有用的演示来说明问题。我将其复制在这里： http://jsfiddle.net/nwccdwLw/1/ p>

---

解决方法选项

来自 Stack Overflow 社区的 Hacky 解决方案：

• “看来这个问题不能仅用 CSS 来解决，所以我建议您使用 JQuery 解决方案。”

• “奇怪的是，大多数浏览器都没有正确实现列弹性容器，但对写入模式的支持相当不错.因此，您可以使用垂直书写模式的 row flex 容器。”

---

更多分析

• Chromium 错误报告

• 马克·埃默里的回答

---

描述同一问题的其他帖子

• Flex 盒子容器宽度不会增长
• 如何使 display:flex 容器与其包装的内容水平扩展？
• Flex-flow：列换行。如何设置容器的宽度等于内容？
• Chrome 中的 Flexbox Flex-flow 列换行错误？
• 如何使用“flex-flow：列换行”？
• 内容换行成列时 Flex 容器不会展开
• flex-flow：列换行，在弹性框中导致父容器溢出
• Html Flexbox 容器不会在包裹的子项上展开
• Flexbox 容器和溢出的 Flex 子项？
• 如何制作一个可以拉伸以适合包裹的物品的 Flexbox 容器？
• 当有多列时，Flex 容器计算一列
• 使用 Flex 使容器全宽
• Flexbox 容器可以调整大小吗？
• Flex-Wrap 内置 Flex-Grow
• Flexbox 逐渐包含
• 将 flexbox 元素扩展到其内容？
• Flexbox 列拉伸以适合内容
• https://stackoverflow.com/q/48406237/3597276
• flex-flow：列换行不会拉伸父元素的宽度
• 为什么我的
  没有扩展宽度以覆盖所有
  • ？
• https://stackoverflow.com/q/55709208/3597276
• Flexbox 换行不会增加父级的宽度？
• 绝对 Flex 容器未更改为定义最大高度的正确宽度
• 父内联块 div 比带 flex-wrap 的子 div 窄