When flexbox items wrap in column mode, container does not grow its width
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
Late to the party, but was still running into this issue YEARS later. Ended up finding a solution using 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 that toggles between the flexbox issue and the grid fix: https://codepen.io/MandeeD/pen/JVLdLd
I just found a really awesome PURE CSS workaround here.
https://jsfiddle.net/gcob492x/3/
The tricky: set writing-mode: vertical-lr
in the list div then writing-mode: horizontal-tb
in the list item. I had to tweak the styles in the JSFiddle (remove a lot of the alignment styles, which aren't necessary for the solution).
Note: the comment says it only works in Chromium-based browsers, and not Firefox. I've only personally tested in Chrome. It's possible either there's a way to modify this to make it work in other browsers or there have been updates to said browsers that make this work.
Big shoutout to this comment: When flexbox items wrap in column mode, container does not grow its width. Digging through that issue thread led me to https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39 which led me to this JSFiddle.