当flexbox项目以列方式打包时，容器不会增长其宽度 [英] When flexbox items wrap in column mode, container does not grow its width

问题描述

我正在工作的嵌套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：柱; 
 flex-wrap：wrap; 
 / * ... and more ... * / 
} 
  

我的问题是，当窗口的高度变得太小时，内部列表不会包装。我试图大量篡改所有flex属性，尝试遵循 CSS-Tricks的指南。

这个 JSFiddle 显示了什么

预期结果（我想要的）：

我所需的输出http://atornblad.se/so/flexbox-wrapping.png

实际结果（我得到的）：

我当前的输出http://atornblad.se/so/flexbox-not-wrapping.png

UPDATE

经过一番调查，现在开始看起来像一个更大的问题。 所有主要浏览器的行为方式相同，它与我的flexbox设计嵌套无关。

这个其他JSFiddle 清楚地演示了这个问题。在当前版本的Chrome，Firefox和IE11中，所有项目都正确包装;列表的高度在 row 模式中增加，但是在列模式下其宽度不会增加。此外，当改变列模式的高度时，根本没有元素的立即回流，但在行模式。

但是，官方规格（具体参见示例5） 似乎表明我想做的是可能的。

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

UPDATE 2

在调整大小事件期间更新各种元素的高度和宽度，我得出结论，它是太复杂，太麻烦尝试解决它的方式。此外，添加JavaScript绝对打破了flexbox模型，应该保持尽可能干净。

现在，我回落到 overflow -y：auto 而不是 flex-wrap：wrap ，以便内部容器在需要时垂直滚动。

解决方案

这看起来像是一个非常漂亮的方法， Flexbox布局中的基本缺陷。列方向上的柔性容器不会扩展以容纳其他列。 （这不是 flex-direction：row 中的问题。）

此问题已被多次

很难将此设为一个错误，因为所有主要浏览器都会出现问题。但它确实引起了一个问题：

所有主流浏览器如何获得flex容器
expand on wrap行方向，但不是列方向？

你会认为至少有一个会正确。我只能猜测原因。

问题插图

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

另一个Stack Overflow用户提出的JavaScript / JQuery解决方案： http://stackoverflow.com/a/26231447/3597276

类似问题

• Flex框容器宽度不会增长


• 如何显示：flex容器随包装内容水平扩展？


• Flex-flow：列换行。如何设置容器的宽度等于内容？


• Flexbox flex-flow column wrap


• 如何使用flex-flow：column wrap？


• 当内容包裹在列中时，Flex容器不会展开


• flex-flow：列换行，在弹性框中导致父级溢出容器


• Html flexbox容器不会覆盖封装的儿童


• Flexbox容器和溢出的弹性儿童？


• 如何制作一个伸展以适合包装物品的flexbox容器？


• Flex容器计算一列（当有多列时）


• 使容器全宽灵活


• Flexbox容器可调整大小吗？


• Flex- Wrap Inside Flex-Grow

I am working on a nested flexbox layout which should work as follows:

The outermost level (ul#main) is a horizontal list that must expand to the right when more items are added to it. If it grows too big, there should be a horizontal scroll bar.

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

Each item of this list (ul#main > li) has a header (ul#main > li > h2) and an inner list (ul#main > li > ul.tasks). This inner list is vertical and should wrap into columns when needed. When wrapping into more columns, its width should increase to make room for more items. This width increase should apply also to the containing item of the outer list.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

My problem is that the inner lists don't wrap when the height of the window gets too small. I have tried lots of tampering with all the flex properties, trying to follow the guidelines at CSS-Tricks meticulously, but no luck.

This JSFiddle shows what I have so far.

Expected result (what I want):

My desired output http://atornblad.se/so/flexbox-wrapping.png

Actual result (what I get):

My current output http://atornblad.se/so/flexbox-not-wrapping.png

UPDATE

After some investigation, this is beginning to look like a bigger issue. All major browsers behave the same way, and it has nothing to do with my flexbox design being nested. Even simpler flexbox column layouts refuse to increase the list's width when the items wrap.

This other JSFiddle clearly demonstrates the problem. In current versions of Chrome, Firefox and IE11, all items wrap correctly; the list's height increases in row mode, but its width does not increase in column mode. Also, there is no immediate reflow of elements at all when changing the height of a column mode, but there is in row mode.

However, the official specs (look specifically at example 5) seem to indicate that what I want to do should be possible.

Can someone come up with a workaround to this problem?

UPDATE 2

After a lot of experimenting using JavaScript to update the height and width of various elements during resize events, I have come to the conclusion that it is too complex and too much trouble to try to solve it that way. Also, adding JavaScript definitely breaks the flexbox model, which should be kept as clean as possible.

For now, I'm falling back to overflow-y: auto instead of flex-wrap: wrap so that the inner container scrolls vertically when needed. It is not pretty, but it is one way forward that at least does not break useability too much.

解决方案

This looks like a fundamental deficiency in the flexbox layout. A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.)

This question has been asked many times (see list below), with no clean flex or general CSS answers.

It's hard to pin this as a bug because the problem occurs across all major browsers. But it does raise the question:

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

You would think at least one of them would get it right. I can only speculate on the reason. Maybe it was a technically difficult implementation and was shelved for this iteration.

Illustration of Problem

The OP created a useful demo illustrating the problem. I'm copying it here: http://jsfiddle.net/nwccdwLw/1/

Workaround Option

Another Stack Overflow user's proposed JavaScript/JQuery solution: http://stackoverflow.com/a/26231447/3597276

Similar Questions

• 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项目以列方式打包时，容器不会增长其宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！