1

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Kirill Rogovoy
  • 583
  • 3
  • 11

4 Answers4

5

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:

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

You have no pre determined width so it'd register it as a 50% width field. Generally you'd set a width in group g1 and then flex: 1; in group g2

Option
  • 2,605
  • 2
  • 19
  • 29
0

well. the two groups have the width of 50% ( half) of their parent .container which by default has width:100% of the body . so if you want your columns to be smaller either make the .container smaller , either make one group smaller, for example .g1 width :30%

see both examples below :

  1. .g1 smaller

.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;
    width:30%;
}

.g2 {
  background: #0000aa;
  /*flex:1; could also use this*/
}
<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>
  1. container smaller 

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #aa0000;
  height: 100px;
  width:50%;
  
}

.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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
0

To anyone encountering this niche problem post 2023, it seems that adding width: fit-content; to the container solves this issue.

Amended JsFiddle

Alex Currie-Clark
  • 628
  • 9
  • 9