Simple two col flex row layout question

I have a section with a container (flex row) and in it I have a div and a block. the div should be a logo, which is max 200px wide. the block element on the right side is by nature 100% big. For some reason unknown to me, the block element jumps to its own row when the viewport is smaller than 768px. can someone explain why this happens?

viewport bigger 768px (what i expect)

viewpert smaller 768px (dont understand the linebreak)

Hey @Amplus,

Bricks automatically sets the flex-wrap to wrap at this breakpoint – I do not like this forced default behavior either. Maybe something that can be removed in a future version, @charaf, @Matej, @timmse? :see_no_evil:

CleanShot 2024-09-24 at 17.41.41

Make sure to explicitly set flex-wrap to nowrap (don’t let the placeholder value fool you) and you’re good to go.

CleanShot 2024-09-24 at 17.40.55

Best,

André

2 Likes

Ahh I’m beginning to understand wrap/nowrap!
@aslotta ty so much!
Jonas

My personal opinion now:

For me, this default behavior is many times useful enough so that I don’t need to change it :slight_smile: But it’s also true that it’s something that the user does not expect.

And for removing this. I wouldn’t mind, but the “old” websites would still need to have this default there to not break any layouts. :slight_smile:

Matej

I think if a behaviour is influenced by bricks it would be useful to find it in the documentation. I had searched here (Understanding The Layout – Bricks Academy) beforehand and only found Flexbox with 100% width. An info here would have been enough for me so that I wouldn’t have had to ask the forum.