Parent container ignores child container's width when using flex column wrap

Question

I'm using flex container to ensure that elements within the container are wrapped vertically, so when the elements reach the end of the container's border they they wrap into the next column.

When I try to group several of these containers horizontally with an outer container they overlap based on the width of the individual elements rather than based on the width of the container.

I know that this can be solved by specifying the width of first container as an absolute fixed value. However I don't want to specify the width absolutely since the elements within the container can vary.

Here is a simplified code snippet of the problem:

#wrapper {
  display: inline;
}

.box-grouping-wrapper {
  display: inline-block;
}

.box-grouping {
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.box {
  text-align: center;
  color: white;
  padding: 50px;
  border: 1px solid black;
  width: 50px
}

.red {
  background: red;
}

.green {
  background: green;
}

<div id="wrapper">
  <div class="box-grouping-wrapper">
    <div class="box-grouping">
      <span class="red box">1</span>
      <span class="red box">2</span>
      <span class="red box">3</span>
      <span class="red box">4</span>
      <span class="red box">5</span>
      <span class="red box">6</span>
    </div>
  </div>
  <div class="box-grouping-wrapper">
    <div class="box-grouping">
      <span class="green box">1</span>
      <span class="green box">2</span>
      <span class="green box">3</span>
      <span class="green box">4</span>
      <span class="green box">5</span>
      <span class="green box">6</span>
    </div>
  </div>
</div>

And here is the JS fiddle for it:

https://jsfiddle.net/nf4jvz1u/1/

Here is what I would like the solution to look like (but without a fixed width):

https://jsfiddle.net/nf4jvz1u/2/

The only difference is adding width:300px; to the .box-grouping element.

Edit: It's important that I need to add that the box element heights are varied and unknown until runtime. So I can't just fix them into predetermined columns. So one box might be 100px high another might be 50px. They will all have the same width though.

Edit: Solution

I've found the solution from another stackoverflow question. Here is final solution to the problem:

https://jsfiddle.net/k0jfenuL/3/

Might be a duplicate of this: https://stackoverflow.com/q/33891709/3597276 — Michael Benjamin, Jul 21 '20 at 00:28
Thank you. This was very useful. I;ve created my solution based on what you've provided: https://jsfiddle.net/k0jfenuL/3/ — Andrew Burrows, Jul 21 '20 at 00:58

score 0 · Accepted Answer · answered Jul 21 '20 at 00:23

0

stick with flex!

#wrapper {
  display: flex;
}

#spacer{
width:5px;
}

.col {
  display: flex;
  flex-direction:column;
}

.box-grouping {
  height: 500px;
  display: flex;
 // flex-wrap: wrap;
  flex-direction: row;
}

.box {
  text-align: center;
  color: white;
  padding: 50px;
  border: 1px solid black;
  width: 50px
}

.red {
  background: red;
}

.green {
  background: green;
}

<div id="wrapper">
  
    <div class="box-grouping">
    <div class='col'>
      <span class="red box">1</span>
      <span class="red box">2</span>
      <span class="red box">3</span>
      </div>
      <div class='col'>
      <span class="red box">4</span>
      <span class="red box">5</span>
      <span class="red box">6</span>
    </div>
  </div>
  
  <div id='spacer'></div>
  
    <div class="box-grouping">
    <div class='col'>
      <span class="green box">1</span>
      <span class="green box">2</span>
      <span class="green box">3</span>
      </div>
      <div class='col'>
      <span class="green box">4</span>
      <span class="green box">5</span>
      <span class="green box">6</span>
    </div>
  </div>
</div>

answered Jul 21 '20 at 00:23

DCR

14,737
12
52
115

I'm sorry but I should have added that the size of the boxes can be varied as well! So I'd prefer not to have a second grouping. I can perhaps solve this problem with javascript like you have provided to dynamically group elements based on their height, but I was wondering if there was a plain css/html solution. – Andrew Burrows Jul 21 '20 at 00:28
do you mean each box can be a different width? – DCR Jul 21 '20 at 00:36
Ah, I meant each box can be a different height, the width will be fixed. – Andrew Burrows Jul 21 '20 at 00:39
It's no longer clear what you want the output to look like. Can you provide an example with different box sizes? a diagram or picture would be fine – DCR Jul 21 '20 at 00:40
Sure, here is the problem with variable heights for the boxes and number of boxes: https://jsfiddle.net/k0jfenuL/1/ The hieght and number of boxes for each group is unknown until runtime. (I've made the widths smaller so it's easier to see) Here is what the solution would look like ideally: https://jsfiddle.net/k0jfenuL/2/ (but without the padding) – Andrew Burrows Jul 21 '20 at 00:53
Thank you for all your help. I have actually found the solution to the problem by using row wrap and then "inverting" the boxes: https://jsfiddle.net/k0jfenuL/3/ – Andrew Burrows Jul 21 '20 at 01:02

Parent container ignores child container's width when using flex column wrap

1 Answers1