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

问题描述

我正在处理嵌套的 flexbox 布局，其工作方式如下:

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

#main {显示:弹性；弹性方向:行；flex-wrap: nowrap;溢出-x:自动；/* ...和更多... */}

这个列表的每一项(ul#main>li)都有一个标题(ul#main>li>h2)和一个内部列表(<代码>ul#main>li>ul.tasks).这个内部列表是垂直的，需要时应该包装成列.当包装成更多的列时，它的宽度应该增加，以便为更多的项目腾出空间.这种宽度增加也应该适用于外部列表的包含项.

.tasks {弹性方向:列；flex-wrap: 包裹;/* ...和更多... */}

我的问题是当窗口的高度太小时，内部列表不会换行.我尝试了大量篡改所有 flex 属性，尝试遵循 清楚地说明了这个问题.在当前版本的 Chrome、Firefox 和 IE11 中，所有项目都正确换行；在row 模式下，列表的高度会增加，但在column 模式下，它的宽度不会增加.此外，当改变 column 模式的高度时，根本没有元素立即回流，但在 row 模式下有.

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

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

更新 2

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

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

解决方案

问题

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

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

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

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

<块引用>

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

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

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

---

问题说明

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

---

解决方法选项

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

• 这个问题似乎不能仅用 CSS 解决，所以我建议您使用 JQuery 解决方案."

• "奇怪的是，大多数浏览器都没有正确实现列 flex 容器，但对写入模式的支持是合理的好的.因此，您可以使用具有垂直书写模式的行 flex 容器."

---

更多分析

• Chromium 错误报告

• 马克·艾默里的回答

---

描述相同问题的其他帖子

• Flex 框容器宽度不会增长
• 如何使 display:flex 容器与其包裹的内容一起水平展开?
• Flex-flow:列换行.如何设置容器的宽度等于内容?
• Chrome 中的 Flexbox flex-flow 列包装错误?
• 如何使用flex-flow:列换行"?
• 当内容包裹在一列中时，Flex 容器不会展开
• flex-flow:列换行，在弹性框中导致父容器溢出
• Html flexbox 容器不会扩展到包裹的孩子
• Flexbox 容器和溢出的 Flex 子级?
• 如何制作可拉伸以适合包裹物品的 flexbox 容器?
• Flex 容器计算一列，当有多列时
• 使用 flex 使容器全宽
• Flexbox 容器可以调整大小吗?
• Flex-Wrap 内部 Flex-Grow
• Flexbox 增长以包含
• 将 flexbox 元素展开为其内容?
• 弹性框列拉伸以适应内容
• https://stackoverflow.com/q/48406237/3597276
• flex-flow:列换行不会拉伸父元素的宽度
• 为什么我的 <ul>扩展宽度以覆盖所有
• ?
• https://stackoverflow.com/q/55709208/3597276
• Flexbox 包裹没有增加父级的宽度?
• 绝对 Flex 容器未根据定义的最大高度更改为正确的宽度

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):

Actual result (what I get):

Older result (what I got in 2015):

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.

解决方案

The Problem

This looks like a fundamental deficiency in flex 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 answers in CSS.

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.

UPDATE: The issue appears to be resolved in Edge v16.

---

Illustration of the Problem

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

---

Workaround Options

Hacky solutions from the Stack Overflow community:

• "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."

---

More Analysis

• Chromium Bug Report

• Mark Amery's answer

---

Other Posts Describing the Same Problem

• 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

这篇关于当 flexbox 项目以列模式换行时，容器不会增加其宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！