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

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