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

> Are you mostly trying to work around having a responsive but uniform "padding" between items?

Yes.

> If this is the case, "maxing" flex grow, which keys off a fraction of the empty space in the flex direction and the content size of the item, might not be the way to go, because short of that max, the grow will still be related to the unique size of content in each item?

Hmm, but if the value of `flex-grow` is the same for all items (e.g. `1`), it is uniform. That is, if there are 4 items and the flex container gets wider by 4 pixels, each item grows by 1 pixel, which is the behaviour I want. Unless I'm misunderstanding what you're saying?

> Even if min()/max() hasn't landed everywhere yet, I think your best bet with currently specified behavior would be to use them in ways like adding padding: 10px max(10px, 3%) on your flex items. 

Yes, that would probably be a better solution than any of the "possible solutions" I tried above, thank you. Even better would be `max(10px, min(3%, 30px))` (or `clamp(10px, 3%, 30px)`), but it's still not ideal:

1. `flex-grow` makes the items grow as soon as there's available space (filling the container short of the max), whereas to get the same behaviour with `padding`, you would need to fine-tune the `3%` value very precisely based on the total width + minimum padding of the flex items, and if you get it slightly wrong it could cause unwanted overflow / wrapping.

2. Growing the `padding` instead of the content's width doesn't affect my use case so much, but imagine if the flex items were list items (`<li>`) instead, and they each contained a link (`<a>`), and you didn't want to have any gap between the links like in my example. The padding in the `<li>` would make that difficult / impossible.

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4143#issuecomment-514202251 using your GitHub account

Received on Tuesday, 23 July 2019 13:09:02 UTC