Unexpected row container layout

Can someone please explain to me what is going on here?
I have this row container (Group N) with 4 smaller groups inside

I cannot for the life of me figure out why the 4th group (black one) is not wrapping to just below the top 3. In other words, why is there that 150 px - 50 px = 100 px gap?

Here are the settings for the sub groups:

Also, when I make the parent group smaller, I get the following effect:


It seems as though it is spacing things out evenly in the vertical direction but the response I’m used to is that the groups just wrap in a way that they hug the group above them as close as they can get.

Any help would be much appreciated.

Hi @paul29 :wave:

This is happening because you set the min height of your Group N to 300 px.

And once the last group (the black one) does not fit side by side with the others, inside your Group N (because of its limitation of max width of 500 px), Bubble is breaking your Group N in two lines. Each line with 150 px (300px / 2 lines).

The small groups are aligned to the vertical top of the parent row (Group N). If you change the alignment of them to the vertical center, you will have a better understanding of what I am talking about.

This is also “the why” the gap keep shrinking when you break your Group N into more lines. Bubble is dividing the min height of 300 px by the amount of lines.

To fix this, just remove your Group N min height.

1 Like

Thanks for getting back to me.

I could have sworn the functionality I was used to was the rows getting as close to each other as possible (i.e. the row thickness not being the height of the group/number of rows). I must have always had a 0 min height and fit height to content checked. I feel dumb.

Thanks again

1 Like