[css3-flexbox] Proposal for collapsing box elements depending on containing box size

This is about extending the flex box WD by giving the ability to  
automatically collapse elements contained in a box:
[1] http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

According to [1], when a container box has extra space, the container  
will resize flexible element to fill up that space.

However, when there is too little space, the spec just says:
> Elements within a box may use the ‘overflow’ property to control  
> whether a scrolling mechanism appears when the children of a box  
> overflow.


Instead of simply overflowing, I would like to be able to collapse  
arbitrary children elements to reduce the container box overflow area.  
Collapsing children elements would be following a priority value  
assigned to each elements.

A use case for this is toolbars: we want to collapse less important  
toolbar items when the toolbar is too small to display all its items  
in its box.

-
Here is the proposal:
Each element directly within a box may be made either collapsible and  
non-collapsible. Collapsible elements may be collapsed if their  
original size would cause the containing box to overflow. This is  
described later.
Non-collapsible elements will never be collapsed or uncollapsed, even  
when the containing box overflows, or has extra space.

Also, collapsing will not affect the computed values of the collapsed  
elements "visibility" properties. However, an element that is  
collapsed behaves as though they have a computed "visibility" value of  
"collapse".

A result of this rule is that, elements whose "visibility" is  
"collapsed" will always be in the collapsed state.


	box-collapse-priority:	<number>

An element becomes collapsible when the box-collapse-priority property  
is specified. The box-collapse-priority property is an unsigned  
integer value representing the priority in which element should be  
collapsed. Its initial value is 0, which indicates that the element is  
non-collapsible. Elements that are collapsible can be collapsed when  
the container box overflows.

The collapsible elements will be collapsed first following the  
increasing order given by their box-collapse-priority values. For  
instance, an element whose box-collapse-priority is 1 will be  
collapsed before an element whose box-collapse-priority is 2. When two  
elements have the same value for box-collapse-priority, the element  
later in the layout order will be collapsed first.

During layout, collapsible elements should be collapsed in order,  
while the there is non-collapsed and collapsible elements to collapse  
and if the containing box overflows.

In an horizontal layout, there is an overflow if the sum the widths of  
contained non-flexible and non-collapsed elements, plus the sum of the  
minimum width of flexible and non-collapsed elements, is greater than  
the width of the containing box.

When there are no more collapsible elements to collapse, the regular  
flex algorithm described in "(5) Flexibility" should be used.
After applying the flex algorithm, and if applicable the "overflow"  
property will be used independently as described in "(1) Overview".

-
Here is a usage example:
<style>
..container {
     display: box;
     box-orient: horizontal;
     box-align: center;
     width: 100%;
}
..A {
     box-flex: 0;
     width: 80px;
     box-collapse-priority: 1; /* Specify that this box should be  
collapsed first when the container overflows */
}
..B {
     box-flex: 1;
     min-width: 100px;
}

..C {
     box-flex: 0;
     width: 80px;
     box-overflow-drop-order: 2; /* should be collapsed after A, if  
container overflows */
}
</style>
<div class="container">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</div>

I would expect the following behavior:

Here are the three boxes. Here they can fit - i.e. A.width + B.min- 
width + C.width > container.width.
+-------+-------------+----+
|   A   | B: Flexible | C  |
+-------+-------------+----+

Here is what would happen when A.width + B.min-width + C.width <  
container.width, (container.width = 200px)
+-------+----+
|   B   | C  |
+-------+----+
-> A is collapsed.

Here is what would happen when B.min-width + C.width <  
container.width, (container.width = 150px)
+-------+
|   B   |
+-------+
-> C is collapsed.

Pierre.