Interesting Flexbox flex-grow trick

[ksolomon]

So while playing around with a flexbox tester yesterday, I stumbled across a nifty trick, however, I’m not sure if it has any utility or unintended consequences.

Here’s the setup, let’s say you have a 900px container with 3 columns. Those three columns are given flex-grow settings of 0, 1, 0. This will give us (in a browser anyway) column widths of 202px, 495px, and 202px. Now let’s say, for whatever reason, you set the flow-grow to 1, 600, 1…you get the EXACT same widths when rendered.

Yes, I know it’s a nonsense number, and I don’t have any good reason WHY you’d do something like that. However, it’s neat that two wildly different settings would give you the same output. That said, is there any reason why you’d go that route, or any gotchas that would crop up?

[PaulOB]

As I understand it if you have flex-grow zero then the items do not grow at all and therefore the remaining space goes to the item that is not zero and since that is the only item then 1 or 100 makes no difference as the other items don’t grow.

flex-grow is about dividing the remaining space between items and when there is only one item to divide with it makes no difference what positive unit you have specified for it.