[csswg-drafts] [css-flexbox] Max flex grow (#4143)

benface has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox] Max flex grow ==
## Problem

Look at this Codepen: https://codepen.io/benface/pen/EqPxwB

If there's enough horizontal space, I would like the links to grow in width but only up to a certain amount (40 more pixels). So on a mobile device they would stay the same, but on a large screen they would be slightly wider, like this:

![max-flex-grow](https://user-images.githubusercontent.com/1059139/61674006-d09a1280-acbf-11e9-927f-202f90102400.jpg)


## Possible solutions

- `.link { flex-grow: 1; }`
  - Result: FAIL, links grow to fill the container.

![too-wide](https://user-images.githubusercontent.com/1059139/61674087-4aca9700-acc0-11e9-8d01-c31980e4086b.jpg)

- `.link { flex-grow: 1; } .flex { max-width: 450px; margin: 0 auto; }`
  - Result: FAIL, this requires hardcoding a value that depends on the amount of links and their width. I'm looking for a solution that works all the time, no matter these variables.

- `.link { flex-grow: 0.1; }`
  - Result: FAIL, except for exactly one container width, but since the container is responsive, when the screen gets narrower the links get too small (not noticeably but still), and when it gets wider they get too big.

- `.link { flex-grow: 1; max-width: 90px; }`
  - Result: FAIL, after reaching the `max-width`, a different amount of pixels has been added to each link because they have different default widths, which results in unequal gaps:

![unequal-gaps](https://user-images.githubusercontent.com/1059139/61674656-c4fc1b00-acc2-11e9-8bf9-7d030ebc03cc.jpg)


## Proposed solution

A new `flex-max-grow` (or `max-flex-grow`, or even `flex-grow-max`?) property that defines how much a flex item is allowed to grow:

```
.link {
  flex-grow: 1;
  flex-max-grow: 20px;
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4143 using your GitHub account

Received on Tuesday, 23 July 2019 01:05:59 UTC