html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度

我正在处理一个嵌套的 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显示我到目前为止所拥有的。

预期结果 (我想要的):

My desired output

实际结果 (我得到的):

My current output

旧结果 (我在 2015 年得到的结果):

My older output

更新

经过一些调查，这看起来像是一个更大的问题。 所有主流浏览器的行为方式都一样，这与我的嵌套 flexbox 设计无关。即使是更简单的 flexbox 列布局也拒绝在元素换行时增加列表的宽度。

这other JSFiddle清楚地说明了问题。在当前版本的 Chrome、Firefox 和 IE11 中，所有元素都正确换行；列表的高度在row 模式下增加，但它的宽度在column 模式下不增加。此外，当更改 column 模式的高度时根本不会立即回流元素，但在 row 模式下会。

然而，official specs (look specifically at example 5)似乎表明我想做的事情应该是可能的。

有人能想出解决这个问题的方法吗？

更新 2

在调整大小事件期间使用 JavaScript 更新各种元素的高度和宽度进行了大量试验后，我得出的结论是，尝试以这种方式解决它太复杂、太麻烦。此外，添加 JavaScript 肯定会破坏 flexbox 模型，它应该尽可能保持干净。

现在，我回退到 overflow-y: auto 而不是 flex-wrap: wrap 以便内部容器在需要时垂直滚动。它不是很漂亮，但它是一种前进的方式，至少不会过多地破坏可用性。

最佳答案

问题

这看起来像是 flex 布局的根本缺陷。

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

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

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

How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?

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

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

问题说明

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

变通方案

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

描述相同问题的其他帖子

关于html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26744648/

html - 当 flexbox 元素以列模式包装时，容器不会增加其宽度

更新

更新 2

问题

问题说明

变通方案

更多分析

描述相同问题的其他帖子

上一篇：javascript - html5视频元素有什么bug？几个小时后它不会继续播放内容

下一篇：html - 为什么chrome渲染字体这么亮？