# "Group Selection" creates a non-flex Stack

**URL:** <https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947>\
**Category:** Bugs\
**Tags:** visual-editor\
**Created:** [December 1, 2022, 1:04am UTC](https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947 "2022-12-01T01:04:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![balleverte](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/balleverte/32/2157_2.png) [@balleverte](https://forum.builder.io/u/balleverte)\
**Post date:** [December 1, 2022, 1:04am UTC](https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947/1 "2022-12-01T01:04:43Z")

</div>

### Reproduction

1. create several blocks, e.g. a button, a text, and an image
2. highlight these blocks in the Layers view or press ⌘-G
3. Builder creates a new Box and adds all the selected items as children. The new Box has a Stack inner-layout, but lacks `display: flex; flex-direction: column`:  
 ![group-box-no-flex](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b82966d6787a8904bd094216d235375022315084.png)

If I then select Row and then Column again, I get the CSS properties I expect:

 ![group-box-flex](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b8a10f966d9682d843879588a3fa322d0d390de8.png)

You can also reproduce this by creating a Box, then dragging items into it. As soon as it has multiple children, it will become a non-flex Stack.

### Why this is a problem

Setting the `gap` property on an element that doesn’t have `display: flex` (or similar) has no effect.

### Preferred Solution

As soon as a Box becomes a Stack, give it `display: flex; flex-direction: column`.

### Alternate Solution

Don’t make the Box a Stack (or row). Users must explicitly opt into that layout. I don’t like this solution because there’s no Static layout in Builder, so this becomes the only way to create an element that has `display: block`.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 1, 2022, 1:49pm UTC](https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947/2 "2022-12-01T13:49:47Z")

</div>

Hi @balleverte,

We are not able to reproduce this behaviour, could you please check and confirm if the **Use default styles** is enabled under the Account Settings → Advanced Settings → Editor

 ![Screenshot 2022-12-01 at 7.36.17 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/da165ba2df5d9a8f10a3d897822e6c2990d0e50d.jpeg)

---

<div class="post-metadata">

**Author:** ![balleverte](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/balleverte/32/2157_2.png) [@balleverte](https://forum.builder.io/u/balleverte)\
**Post date:** [December 1, 2022, 8:08pm UTC](https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947/3 "2022-12-01T20:08:46Z")

</div>

I had, indeed, disabled “Use default styles” because our design team wants strict control over the visual display, so they want styles to inherit via CSS. Re-enabling that feature does fix the problem.

(In particular, I had hoped that disabling that feature would remove the default `height: 200px` from Box and the `line-height: normal` from Text, but neither seems to be the case.)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 2, 2022, 4:16am UTC](https://forum.builder.io/t/group-selection-creates-a-non-flex-stack/2947/4 "2022-12-02T04:16:42Z")

</div>

Hi @balleverte,

The default `height: 200px;` and `line-height: normal;`. These default styles help keep things in order for box layout, and text. These are necessary so that when creating them a user can focus on the look and feel. You can read more about them at [Builder Best Practices](https://www.builder.io/c/docs/best-practices)