Re: Flexbox: grow item only when wrapped

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:57:16 UTC