Re: Flex items growing unless they wrap to a line of their own

On Mon, Jan 12, 2015 at 12:39 PM, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

> On Fri, Jan 9, 2015 at 3:42 PM, Jared Wein <jaws@mozilla.com> wrote:
> > Hi www-style,
> >
> > dev.w3.org/csswg/css-flexbox-1/#flex-lines example 9 shows four flex
> items
> > that have flex-grow:1; inside of a container that has flex-wrap:wrap;
> > applied.
> >
> > I have recreated the example locally, but I would like to alter it so
> that
> > if the container resizes and forces its last child element to wrap to a
> line
> > of its own, that the element will not grow to the full width of the line.
> >
> > As ASCII art, this is the desired outcome when the container is wide
> enough
> > to fit all children on a single line:
> > -----------------------------------
> > |[   AAA   ][   BBB   ][   CCC   ]|
> > |                                 |
> > -----------------------------------
> >
> > This is the desired outcome when the container is too narrow to fit all
> > children on a single line:
> ​​
> > ----------------------------
> > |[    AAA    ][    BBB    ]|
> > |[CCC]                     |
> > ---------------------------|
> >
> > Is this type of layout possible with display:flex or a different layout
> > algorithm?
>
> At the moment, no, this is not possible.  This is a high-priority item
> for Flexbox 2, though: <https://wiki.csswg.org/spec/css-flexbox-2>
>
> ~TJ
>


​Thanks. I should note that another desired result would be the following:​

​​----------------------------
|[    AAA    ][    BBB    ]|
|[    CCC    ]             |
---------------------------|​

​Cheers,
Jared​