When Flexbox Items Wrap In Column Mode, Container Does Not Grow Its Width

May 30, 2023 Post a Comment

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

Solution 1:

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:

More Analysis

Solution 2:

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

Solution 3:

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.

Solution 4:

CSS-only workaround

Nearly 6 years after this question was asked, this flexbox bug still exists, so here's a CSS-only flex-direction: column workaround for anyone else that ends up here:

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;
}

<divclass="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>

This workaround gives the same outcome as flex-direction: column and works with both flex-wrap: wrap and wrap-reverse.

Solution 5:

It is unfortunate that so many major browsers suffer from this bug after many years. Consider a Javascript workaround. Whenever the browser window resizes, or content is added to the element, execute this code to get it to resize to the proper width. You can define a directive in your framework to do it for you.

element.style.flexBasis = "auto";element.style.flexBasis = `${element.scrollWidth}px`;

Html5 Lite