Flexbox: grow item only when wrapped

# Oliver Joseph Ash (2 hours ago)

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.


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.

Contact us to advertise here
# Kostas Siabanis (an hour ago)

Adding flex-basis: auto instead of flex-basis: 300px on .text seems to solve the issue?

Br, Kostas

# Oliver Joseph Ash (an hour ago)

I don't believe so. The flex-basis is needed on the first item to force the second item to wrap.

To help clarify my question, here is the same example, this time including the workaround I mentioned. You can see the desired effect—only when the second item is wrapped, it grows. jsbin.com/nuqoke/3/edit?html,css,output

On Wed, 20 Sep 2017 at 09:09 Kostas Siabanis kostas.siabanis@gmail.com


Want more features?

Request early access to our private beta of readable email premium.