Re: Flexbox: grow item only when wrapped

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.
http://jsbin.com/nuqoke/3/edit?html,css,output

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

> Adding *flex-basis: auto *instead of *flex-basis: 300px* on *.text* seems
> to solve the issue?
>
> Br,
> Kostas
>
> On Wed, 20 Sep 2017 at 10:41 Oliver Joseph Ash <oliverjash@gmail.com>
> wrote:
>
>> 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 08:13:50 UTC