# ISSUE-144: distribution of negative available space

## distribution of negative available space

- State:
- CLOSED
- Product:
- CSS3 Flexbox
- Raised by:
- Alex Mogilevsky
- Opened on:
- 2010-08-23
- 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.

- Related Actions Items:
- No related actions
- Related emails:
- [CSSWG] Minutes and Resolutions Oslo F2F 2010 Tuesday: GCPM, MQ, Flexbox, Multicol, box-shadow, Publications, Future F2Fs (from fantasai.lists@inkedblade.net on 2010-08-31)
- Re: [css3-flexbox] issues resolved in FTF (from jackalmage@gmail.com on 2010-08-25)
- [css3-flexbox] issues resolved in FTF (from alexmog@microsoft.com on 2010-08-25)
- ISSUE-144: distribution of negative available space (from sysbot+tracker@w3.org on 2010-08-23)

## Related notes:

Not resolved. Agreed that simply applying flex calculation with the negative sign rarely makes sense. A better solution to be investigated. Advice: explore TeX box model.

Alex Mogilevsky, 25 Aug 2010, 10:36:20RESOLVED: Multiply flex shrink ratio by flex basis for used flex shrink ratio.

Elika Etemad, 19 Jan 2013, 01:15:18## Changelog:

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

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.

'

Issue dissociated from any product

Alex Mogilevsky, 23 Aug 2010, 09:13:24Product changed to CSS3 Flexbox

Alex Mogilevsky, 23 Aug 2010, 09:21:35Status changed to 'open'

Alex Mogilevsky, 23 Aug 2010, 09:22:18Status changed to 'closed'

Elika Etemad, 19 Jan 2013, 01:15:57