Container does not increase its width when Flexbox item wraps in column mode

Question

I'm developing a nested Flexbox layout that works like this:

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

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

Each item in 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. As it wraps into more columns, its width should increase to make room for more items. This width increase should also apply to the containing items of the outer list.

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

My problem is that when the height of the window is too small, the inner list does not wrap. I tried a lot of tampering with all the Flex properties, trying to strictly follow CSS-Tricks' guidelines, but with no success.

This JSFiddle shows what I have so far.

Expected results (What I want):

Actual Result (What I got):

Older Results (Results I got in 2015) :

renew

After some investigation, this started to look like a bigger problem. All major browsers behave the same way, this has nothing to do with my nested Flexbox design. Even the simpler Flexbox column layout does not increase the width of the list as items wrap.

Another JSFiddle clearly demonstrates the problem. In current versions of Chrome, Firefox, and IE11, all items wrap correctly; the height of the list increases in row mode, but its width does not increase in column mode . Also, when changing the height of the column mode, the element is not reflowed immediately at all, but it does happen in the row mode.

However, the official specification (see example 5 for details) seems to indicate that what I want to do should be possible.

Can anyone figure out a solution to this problem?

Update 2

After a lot of trying to use JavaScript to update the height and width of various elements during a resize event, I've come to the conclusion that trying to solve it this way is too complicated and cumbersome. Also, adding JavaScript will definitely break the Flexbox model, which should be kept as clean as possible.

Now, I fall back to overflow-y: auto instead of flex-wrap:wrapper so that the inner container scrolls vertically when needed. It's not pretty, but it's an approach that at least doesn't break usability too much.

Answer 1

Late to the party but still having this problem years later. Finally found a solution using a grid. On the container you can use

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

I have an example on CodePen for switching between Flexbox issues and grid fixes: https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

question

This looks like a fundamental flaw in FlexLayout.

Column-oriented flex containers 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) and there is no clear answer in CSS.

It's difficult to pinpoint this as a bug because the problem occurs in all major browsers. But it does raise a question:

You'd think at least one of them would get it right. I can only speculate as to why. Perhaps this was a technically difficult implementation and therefore was shelved in this iteration.

Update: This issue appears to have been resolved in Edge v16.

---

Problem description

OP created a useful demo to illustrate the problem. I copied it here: http://jsfiddle.net/nwccdwLw/1/ p>

---

Solution options

Hacky solutions from the Stack Overflow community:

• "It seems that this problem cannot be solved with CSS only, so I recommend you to use JQuery solution."

• "Oddly enough, most browsers don't implement column flex containers correctly, but support for write mode is pretty good. Therefore, you can use row flex containers in vertical writing mode."

---

More analysis

• Chromium Bug Report

• Mark Emery’s answer

---

Other posts describing the same problem

• Flex box container width will not grow
• How to make a display:flex container expand horizontally with its wrapped content?
• Flex-flow: Column wrapping. How to set the width of the container equal to the content?
• Flexbox Flex-flow column wrapping error in Chrome?
• How to use "flex-flow: column wrap"?
• The Flex container will not expand when the content is wrapped into columns
• flex-flow: Column wrapping, causing the parent container to overflow in the flex box
• Html Flexbox container does not expand on wrapped children
• Flexbox container and overflowing Flex children?
• How to make a Flexbox container that stretches to fit wrapped items?
• When there are multiple columns, the Flex container calculates one column
• Use Flex to make the container full width
• Can Flexbox containers be resized?
• Flex-Wrap built-in Flex-Grow
• Flexbox gradually includes
• Expand a flexbox element to its content?
• Flexbox columns stretch to fit content
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: Column wrapping does not stretch the width of the parent element
• Why doesn't my
  expand in width to cover all
  • ?
• https://stackoverflow.com/q/55709208/3597276
• Flexbox Wrapping will not increase the width of the parent?
• Absolute Flex container not changed to correct width defining maximum height
• The parent inline block div is narrower than the child div with flex-wrap