html - 当 Flexbox 元素以列模式换行时，容器不会增加其宽度

Question

我正在开发一个嵌套的 Flexbox 布局，其工作原理如下:

最外层 (ul#main) 是一个水平列表，当添加更多元素时，该列表必须向右扩展。如果它变得太大，应该有一个水平滚动条。

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

此列表中的每个元素 (ul#main > li) 都有一个 header (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 列布局也不会在元素换行时增加列表的宽度。

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

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

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

更新2

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

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

Answer 1

问题

这看起来像是 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 解决方案:

• "It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."

• "It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."

<小时/>

更多分析

• Chromium Bug Report

• Mark Amery's answer

<小时/>

描述同一问题的其他帖子

• Flex box container width doesn't grow
• How can I make a display:flex container expand horizontally with its wrapped contents?
• Flex-flow: column wrap. How to set container's width equal to content?
• Flexbox flex-flow column wrap bugs in chrome?
• How do I use "flex-flow: column wrap"?
• Flex container doesn't expand when contents wrap in a column
• flex-flow: column wrap, in a flex box causing overflow of parent container
• Html flexbox container does not expand over wrapped children
• Flexbox container and overflowing flex children?
• How can I make a flexbox container that stretches to fit wrapped items?
• Flex container calculating one column, when there are multiple columns
• Make container full width with flex
• Flexbox container resize possible?
• Flex-Wrap Inside Flex-Grow
• Flexbox grow to contain
• Expand flexbox element to its contents?
• flexbox column stretch to fit content
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: column wrap doesn't stretch the parent element's width
• Why doesn't my <ul> expand width to cover all the <li>?
• https://stackoverflow.com/q/55709208/3597276
• Flexbox wrap not increasing the width of parent?
• Absolute Flex container not changing to the correct width with defined max-height
• Parent inline-block div is narrower than the child div with flex-wrap