我正在開發一個嵌套的 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）似乎顯示我想做的事情應該是可能的。
有人能想出解決這個問題的方法嗎？
經過大量嘗試使用 JavaScript 在調整大小事件期間更新各種元素的高度和寬度後，我得出的結論是，嘗試以這種方式解決它太複雜且太麻煩。另外，添加 JavaScript 肯定會破壞 Flexbox 模型，該模型應該盡可能保持乾淨。
現在，我回到 overflow-y: auto 而不是 flex-wrap:wrapper ，以便內部容器在需要時垂直捲動。它並不漂亮，但它是一種至少不會過度破壞可用性的方法。
P粉2210464252023-10-18 18:31:39
聚會遲到了，但幾年後仍然遇到這個問題。最終找到了使用網格的解決方案。在容器上您可以使用
display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto);
我在 CodePen 上有一個在 Flexbox 問題和網格修復之間切換的範例：https://codepen .io/MandeeD/pen/JVLdLd
P粉0119126402023-10-18 09:45:49
這看起來像是彈性佈局的一個根本缺陷。
列方向的彈性容器不會擴展以容納額外的列。 （這在 flex-direction: row 中不是問題。）
這個問題已被問過很多次（請參閱下面的列表），CSS 中沒有明確的答案。
很難將此確定為錯誤，因為所有主要瀏覽器都會出現該問題。但這確實提出了一個問題：
你會認為他們中至少有一個人會做對。我只能推測原因。也許這是一個技術上困難的實現，因此在本次迭代中被擱置。
更新：該問題似乎已在 Edge v16 中解決。
OP 創建了一個有用的演示來說明問題。我將其複製在這裡： http://jsfiddle.net/nwccdwLw/1/
來自 Stack Overflow 社群的 Hacky 解決方案：