当 flexbox 项目以列模式包装时，容器不会增加其宽度

Question

我正在处理一个嵌套的 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 上的指南，但没有成功。

This JSFiddle 展示了我目前所拥有的。

预期结果 （我想要的） ：

实际结果 （我得到的） ：

较早的结果 （我在 2015 年得到的） ：

更新

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

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

然而， 官方规范 （具体查看示例 5） 似乎表明我想做的事情应该是可能的。

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

更新 2

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

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

原文由 Anders Marzi Tornblad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题

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

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

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

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

怎么可能所有主流浏览器都让 flex 容器在行方向而不是列方向展开包装？

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

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

---

问题说明

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

---

解决方法选项

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

• “看来这个问题光靠CSS是解决不了的，所以我给你推荐一个JQuery解决方案。”

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

---

更多分析

• 铬错误报告

• 马克·埃默里的回答

---

描述相同问题的其他帖子

• 弹性盒容器宽度不会增长
• 如何使 display:flex 容器与其包装的内容一起水平扩展？
• Flex-flow：列换行。如何设置容器的宽度等于内容？
• Flexbox flex-flow column wrap bugs in chrome?
• 如何使用“flex-flow: column wrap”？
• 当内容换行在列中时，Flex 容器不会扩展
• flex-flow: column wrap, 在 flex box 中导致父容器溢出
• 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 wrap 不会增加父级的宽度？
  • 绝对 Flex 容器未更改为具有定义的最大高度的正确宽度

  原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 MandeeD 发布，翻译遵循 CC BY-SA 4.0 许可协议