Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap

I ran into a problem when using flexbox.

I'm using a container with flex-direction: column; flex-wrap: wrap, so my inner items can actually be placed in multiple columns.

The problem is that the browser still calculates the container's width as a sum of inner items' widths!

My container block should have a smaller width (based on content size), but it is actually huge.

Anyway, it's also very unnatural to calculate container's width this way when using columns, not rows.

Take a look at the green block in my code. It has a huge with, but it isn't supposed to have so. Also, it gets smaller as you remove an item from the container.

What I expect is to have the container with small width, so it wouldn't take more than a half of the available space.

Checked this on the latest Safari and Chrome on the latest OS X.

JSFiddle

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #aa0000;
  height: 100px;
}
.group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}
.g1 {
  background: #00aa00;
}
.g2 {
  background: #0000aa;
}

<div class="container">
  <div class="group g1">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
  <div class="group g2">
    <div class="item">Item</div>
  </div>
</div>

This appears to be yet another bug in the Flexible Box Layout Module involving flex-direction: column and flex-wrap: wrap.

Browsers seem to be all over the place on this issue.

In this particular case, as stated in a bug report:

It seems to me that the width is calculated as if the inside elements were laid out horizontally (flex-direction: row) instead of vertically.

In other cases, the opposite occurs:

• When flexbox items wrap in column mode, container does not grow its width

In both cases, there are currently no flex methods to resolve the problem.

For this particular question, one developer offers a CSS workaround, but I'm not sure it works in all browsers. I wouldn't recommend it unless you're truly desperate:

In some instances, you may be able to workaround this issue by using vertical writing mode.

That is, instead of using flex-direction: column;, use flex-direction: row; writing-mode: vertical-lr;. Remember to reset to writing-mode: initial; in the children of the flexbox.

_{https://bugs.chromium.org/p/chromium/issues/detail?id=507397}

Bug reports:

• https://bugs.chromium.org/p/chromium/issues/detail?id=247963
• https://bugs.chromium.org/p/chromium/issues/detail?id=507397
• https://bugzilla.mozilla.org/show_bug.cgi?id=995020
• https://codereview.chromium.org/289903007
• https://src.chromium.org/viewvc/blink?view=revision&revision=178925