html – How to make a flex container have the width of the internal divs?

Question:

Good afternoon, I'm creating a layout with height:100% where I have 2 groups, and inside each group I align the DIV s vertically and if any DIV does not fit the maximum height or there is page resize , it goes to another column, as in example:

https://jsfiddle.net/ErickV/xqkujqv8/

Notice that the 2nd group is overlapping the 2nd column in front of the 1st group. I would like the 2nd group to start after (right) the last column of the 1st group. Is something wrong or could be adjusted in the CSS ?

I made some 'technical adjustments' via JavaScript taking the distance of the last div contained in the 1st group and set a left in the 2nd group, and if there was a 3rd group, I would repeat this process between the 2nd and 3rd and so on. I found a lot of workaround .

Answer:

ErickV , I did some testing using the code you provided and I only managed to set a value for the width of group 1, in short, when the second column of group 1 is created the width does not adjust to the new items, and so group 2 overwrites the newly created column.

I believe that instead of adjusting the left of group 2, you can set a new value for the width of group 1.

To explain it more clearly, Set the value of 250px to the group a direct in css to the width property.

#group1 {width:250px;}

I used the ID so that only group 1 has this new width, however, I believe that this form is only interesting when you can identify the number of columns that a group has.

So you will be able to do the calculation and set a new value for width through the .css() of jquery.

NOTE: the value of 250 would be the calculation (122+3)*2 = 250. 122px of width + 3 of margin, times the amount of column, in this case two!

Scroll to Top