W3C home > Mailing lists > Public > www-style@w3.org > January 2015

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 12 Jan 2015 09:39:19 -0800
Message-ID: <CAAWBYDDeqJ7dDhqG3sWcvrGXVABhLmpOjAxvbCaUh5aXjW17hQ@mail.gmail.com>
To: Jared Wein <jaws@mozilla.com>
Cc: www-style <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:56 UTC