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

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

From: Jared Wein <jaws@mozilla.com>
Date: Fri, 9 Jan 2015 18:42:37 -0500
Message-ID: <CAMq7brEmC3sAt=d7GUBQK=a_dZy=wX9n=9m1C6j9KCqF-RO98A@mail.gmail.com>
To: www-style <www-style@w3.org>
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?

Thanks,
Jared
Received on Monday, 12 January 2015 08:43:09 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:50 UTC