# gpui: Allow chaining \`flex_grow\(\)\` and \`flex_shrink\(\)\` with custom factors \(\#58142\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/8982fb17bc58deb62fd5b1b077a18388ed27c0b2)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 8982fb17bc58deb62fd5b1b077a18388ed27c0b2

Requested commit: 8982fb17bc58deb62fd5b1b077a18388ed27c0b2

Commit: 8982fb17bc58deb62fd5b1b077a18388ed27c0b2

Tree: 2dd0664772a73ac36040d9dee609069c6b029471

Author: Bowen Xu

Committer: GitHub

## Message

````
gpui: Allow chaining `flex_grow()` and `flex_shrink()` with custom factors (#58142)

Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content is consistent with the [UI/UX
checklist](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

Release Notes:

- Allow chaining of `flex_grow()` and `flex_shrink()` with custom
factors, following Tailwind CSS conventions.


_For example:_

<img width="509" height="308" alt="aaa"
src="https://github.com/user-attachments/assets/02094fb2-d762-4ac9-a1d9-ef06e2fb047f"
/>

Before:

``` rust
div()
        .flex()
        .flex_row()
        .size_full()
        .bg(gpui::white())
        .child(
            div()
                .map(|mut this| {
                    this.style().flex_grow = Some(1.);
                    this
                })
                .bg(gpui::blue()),
        )
        .child(
            div()
                .map(|mut this| {
                    this.style().flex_grow = Some(2.);
                    this
                })
                .bg(gpui::green()),
        )
        .child(
            div()
                .map(|mut this| {
                    this.style().flex_grow = Some(3.);
                    this
                })
                .bg(gpui::red()),
        )
```

After:

``` rust
div()
        .flex()
        .flex_row()
        .size_full()
        .bg(gpui::white())
        .child(div().flex_grow(1.).bg(gpui::blue()))
        .child(div().flex_grow(2.).bg(gpui::green()))
        .child(div().flex_grow(3.).bg(gpui::red()))
```
````

## Parents

- [eb424af17ccc195470e538e46f4cc8b80840467f](https://git.cafe/gitcafe/zed/commit/eb424af17ccc195470e538e46f4cc8b80840467f?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/8982fb17bc58deb62fd5b1b077a18388ed27c0b2?format=markdown)