Block flex grow unexpected behaviour

How To
1

Either I’m doing something wrong or there is some global CSS that’s controlling this behaviour.

Either way, this behaviours is counter to how it would react in straight HTML/CSS.

Below is show two blocks (A and B) - each block has two children (A - A1 and A2 | B → B1 and B2)

  • Block A is set to flex direction = column
  • Block B is set to flex direction = row
  • Child A1 and B1 are set to flex grow 1
  • Child A2 and B2 are set to flew grow 3

Bow block A with flex direction = column is not behaving as expected.

image
image3548×2871 429 KB

2

Example of how I expect it to behave with raw HTML/CSS

image
image932×547 24.3 KB

3

Hey @davig,

the important difference is that in your Bricks example you seem to only set the flex-grow property. In your raw html/css scenario you are using the flex shorthand which sets the flex-grow, the flex-shrink and the flex-basis properties.

Using the flex shorthand in Bricks as well results in the same output as in your raw example:

CleanShot 2024-06-04 at 13.56.40
CleanShot 2024-06-04 at 13.56.401920×1323 125 KB

As Bricks blocks have a default width of 100% it results in those equally spaced columns. You should probably use divs instead in this scenario.

Best,

André

1 Like
4

@aslotta I see, silly me. :ok_hand: