- From: Oliver Joseph Ash <oliverjash@gmail.com>
- Date: Wed, 20 Sep 2017 08:13:15 +0000
- To: Kostas Siabanis <kostas.siabanis@gmail.com>
- Cc: www-style@w3.org
- Message-ID: <CADBHO9FYn4Qk9j1a-WycM2uiucKJ5b9LjxrHO9YZgPGmm0pnEA@mail.gmail.com>
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