2013-01-19 01:15:57: Status changed to 'closed' [Elika Etemad]

2010-08-23 09:22:18: Status changed to 'open' [Alex Mogilevsky]

2010-08-23 09:21:35: Product changed to CSS3 Flexbox [Alex Mogilevsky]

2010-08-23 09:13:24: Description changed to 'Current spec suggests using the same formula to shrink flexbox children: shrink-to-fit size is reduced by *subtraction* of a share of space deficit proportional to its flex.

The subtraction approach works for distributing a tiny amount of negative space. However consider this:

.flexbox { width:600px; }

.child1 { min-width:100px; box-flex:1; }/* shrink-to-fit width is 1000px */

.child2 { min-width:100px; box-flex:1; } /* shrink-to-fit width is 2000px */

If it is said that the children have "equal flexibility" which is somehow used to adjust their preferred size in a fair way, it would be reasonable to expect that child2 would end up roughly twice as wide as child1.

However it is not the case -- we will start with preferred size (1000 and 2000), attempt to subtract equal share of negative space (1200) from each, at which point child1 will hit its minwidth and the rest of the space will be given to child2. The final sizes will be: child1=100px, child2=500px.

This way of space distributions seems neither reasonable nor useful.

Proposal:

Use division instead of subtraction to distribute negative space.

For example

Width = (availableWidth - totalWidthOfInflexibleItems) / totalWidthOfFlexibleItems *

shrinkToFitWidth *

boxFlex / totalBoxFlex

This is not the only way to apply division to distribute space, there are other possibilities. This way gives *more* space to elements with bigger flex (which I think is more intuitive actually), but it can be modified to make elements with bigger flex shrink more.

' [Alex Mogilevsky]

The subtraction approach works for distributing a tiny amount of negative space. However consider this:

.flexbox { width:600px; }

.child1 { min-width:100px; box-flex:1; }/* shrink-to-fit width is 1000px */

.child2 { min-width:100px; box-flex:1; } /* shrink-to-fit width is 2000px */

If it is said that the children have "equal flexibility" which is somehow used to adjust their preferred size in a fair way, it would be reasonable to expect that child2 would end up roughly twice as wide as child1.

However it is not the case -- we will start with preferred size (1000 and 2000), attempt to subtract equal share of negative space (1200) from each, at which point child1 will hit its minwidth and the rest of the space will be given to child2. The final sizes will be: child1=100px, child2=500px.

This way of space distributions seems neither reasonable nor useful.

Proposal:

Use division instead of subtraction to distribute negative space.

For example

Width = (availableWidth - totalWidthOfInflexibleItems) / totalWidthOfFlexibleItems *

shrinkToFitWidth *

boxFlex / totalBoxFlex

This is not the only way to apply division to distribute space, there are other possibilities. This way gives *more* space to elements with bigger flex (which I think is more intuitive actually), but it can be modified to make elements with bigger flex shrink more.

' [Alex Mogilevsky]

2010-08-23 09:13:24: Issue dissociated from any product [Alex Mogilevsky]

2010-08-23 09:08:01: Created issue 'distribution of negative available space' nickname owned by Alex Mogilevsky on product , description 'Current spec suggests using the same formula to shrink flexbox children: shrink-to-fit size is reduced by *subtraction* of a share of space deficit proportional to its flex.

The subtraction approach works for distributing a tiny amount of negative space. However consider this:

.flexbox { width:600px; }

.child1 { min-width:100px; box-flex:1; }/* shrink-to-fit width is 1000px */

.child2 { min-width:100px; box-flex:1; } /* shrink-to-fit width is 2000px */

If it is said that the children have "equal flexibility" which is somehow used to adjust their preferred

size in a fair way, it would be reasonable to expect that child2 would end up roughly twice as wide as child1.

However it is not the case -- we will start with preferred size (1000 and 2000), attempt to subtract equal share

of negative space (1200) from each, at which point child1 will hit its minwidth and the rest of the space will be

given to child2. The final sizes will be: child1=100px, child2=500px.

This way of space distributions seems neither reasonable nor useful.

Proposal

Use division instead of subtraction to distribute negative space.

For example

Width = (availableWidth - totalWidthOfInflexibleItems) / totalWidthOfFlexibleItems *

shrinkToFitWidth *

boxFlex / totalBoxFlex

This is not the only way to apply division to distribute space, there are other possibilities. This way gives

*more* space to elements with bigger flex (which I think is more intuitive actually), but it can be modified

to make elements with bigger flex shrink more.

' non-public [Alex Mogilevsky]

The subtraction approach works for distributing a tiny amount of negative space. However consider this:

.flexbox { width:600px; }

.child1 { min-width:100px; box-flex:1; }/* shrink-to-fit width is 1000px */

.child2 { min-width:100px; box-flex:1; } /* shrink-to-fit width is 2000px */

If it is said that the children have "equal flexibility" which is somehow used to adjust their preferred

size in a fair way, it would be reasonable to expect that child2 would end up roughly twice as wide as child1.

However it is not the case -- we will start with preferred size (1000 and 2000), attempt to subtract equal share

of negative space (1200) from each, at which point child1 will hit its minwidth and the rest of the space will be

given to child2. The final sizes will be: child1=100px, child2=500px.

This way of space distributions seems neither reasonable nor useful.

Proposal

Use division instead of subtraction to distribute negative space.

For example

Width = (availableWidth - totalWidthOfInflexibleItems) / totalWidthOfFlexibleItems *

shrinkToFitWidth *

boxFlex / totalBoxFlex

This is not the only way to apply division to distribute space, there are other possibilities. This way gives

*more* space to elements with bigger flex (which I think is more intuitive actually), but it can be modified

to make elements with bigger flex shrink more.

' non-public [Alex Mogilevsky]