当flexbox项目以列模式换行时,容器不会增加其宽度

Question

我正在研究嵌套的flexbox布局,它应该如下工作:

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

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

此list(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年得到的):

UPDATE

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

这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.

然而,官方规范(具体看例5)似乎表明我想做的事情应该是可能的.

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

更新2

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

现在,我正在倒退,overflow-y: auto而不是flex-wrap: wrap让内部容器在需要时垂直滚动.它不漂亮,但它是一种前进的方式,至少不会过多地破坏可用性.

Answer 1

问题

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

列方向的Flex容器不会扩展以容纳其他列.(这不是问题flex-direction: row.)

这个问题已被多次询问(参见下面的列表),CSS中没有干净的答案.

很难将此作为一个错误,因为问题出现在所有主流浏览器中.但它确实提出了一个问题:

所有主流浏览器如何才能使flex容器在行方向上进行扩展而不是在列方向上进行扩展？

你会认为其中至少有一个会做对.我只能推测原因.也许这是一个技术上很难的实现,并且被搁置了这个迭代.

更新:问题似乎在Edge v16中得到解决.

问题的例证

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

解决方法选项

Stack Overflow社区的Hacky解决方案:

• "看来这个问题不能只用CSS来解决,所以我建议你使用JQuery解决方案."

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

更多分析

• Chromium Bug报告

• Mark Amery的回答

其他帖子描述同样的问题

• Flex盒容器宽度不会增长
• 如何进行显示:flex容器水平展开并包裹内容？
• Flex-flow:柱包装.如何设置容器的宽度等于内容？
• Flexbox flex-flow柱包裹铬的错误？
• 我如何使用"flex-flow:column wrap"？
• 当内容包装在列中时,Flex容器不会展开
• flex-flow:列包装,在弹性框中导致父容器溢出
• Html Flexbox容器不会扩展包装的子容器
• Flexbox容器和溢出的flex儿童？
• 如何制作伸展以适合包装物品的Flexbox容器？
• Flex容器在有多列时计算一列
• 使用flex制作容器全宽
• Flexbox容器可以调整大小吗？
• Flex-Wrap内部Flex-Wrap
• Flexbox成长为包含
• 将flexbox元素扩展为其内容？
• flexbox列拉伸以适应内容
• 在flexbox行内部时,嵌套的flexbox列换行不起作用
• flex-flow:列换行不会拉伸父元素的宽度
• 为什么<ul>扩展宽度以覆盖所有<li>？

Answer 2

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

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

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

Answer 3

仅 CSS 解决方法

在提出这个问题近 6 年后，这个 Flexbox 错误仍然flex-direction: column存​​在，所以这里为其他最终出现在这里的人提供了一个仅 CSS 的解决方法：

body {
  background-color: grey;
}

button {
  background-color: white;
  border: none;
  border-radius: 4px;
  width: 80px;
  height: 40px;
  margin: 4px;
}

/* WORKAROUND FOR flex-direction: column WITH WRAP IS BELOW */
.wrapped-columns {
  flex-direction: row;
  flex-wrap: wrap;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

/* Ensures content is rendered correctly in Firefox */
.wrapped-columns * {
    writing-mode: horizontal-tb;
}

<div class="wrapped-columns">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
  <button>Button 7</button>
  <button>Button 8</button>
  <button>Button 9</button>
  <button>Button 10</button>
  <button>Button 11</button>
  <button>Button 12</button>
  <button>Button 13</button>
  <button>Button 14</button>
</div>

此解决方法给出与 和 相同的结果并且flex-direction: column适用于flex-wrap: wrap和wrap-reverse。

Answer 4

我刚刚在这里找到了一个非常棒的 PURE CSS 解决方法。

https://jsfiddle.net/gcob492x/3/

棘手的是：writing-mode: vertical-lr在列表 div 中设置，然后writing-mode: horizontal-tb在列表项中设置。我不得不调整 JSFiddle 中的样式（删除很多对齐样式，这对于解决方案来说不是必需的）。

注意：评论说它只适用于基于 Chromium 的浏览器，而不适用于 Firefox。我只在 Chrome 中亲自测试过。有可能有一种方法可以修改它以使其在其他浏览器中工作，或者已经对所述浏览器进行了更新以使其工作。

对此评论的大喊大叫：当 flexbox 项目以列模式换行时，容器不会增加其宽度。深入研究该问题线程让我找到了https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39，这让我找到了这个 JSFiddle。