Flexbox: grow item only when wrapped

Using flexbox I have found that often I want a flex item to grow *only*
when it is forced to wrap.

An example is a text widget with a button to the side. When the text and
button appear on the same line, the button should not grow. When the button
wraps, it should grow to fit the new line.

http://jsbin.com/nuqoke/1/edit?html,css,output

The only workaround I know of is to set a very large flex-grow on the first
item, and a small flex-grow on the second item. This way, the second item
it will appear not to grow before it has been wrapped.

However, this feels like something flexbox should support out of the box.
Are there any proposed amendments to flexbox that would help here, or is
this something that could be considered? I did wonder if `justify-content:
stretch` would help, but it appears not.

Received on Wednesday, 20 September 2017 07:38:04 UTC