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

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

Received on Monday, 12 January 2015 17:40:08 UTC