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:
  1. [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)
  2. Re: [css3-flexbox] issues resolved in FTF (from jackalmage@gmail.com on 2010-08-25)
  3. [css3-flexbox] issues resolved in FTF (from alexmog@microsoft.com on 2010-08-25)
  4. 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:20

RESOLVED: 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

Alex Mogilevsky, 23 Aug 2010, 09:08:01

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, 23 Aug 2010, 09:13:24

Issue dissociated from any product

Alex Mogilevsky, 23 Aug 2010, 09:13:24

Product changed to CSS3 Flexbox

Alex Mogilevsky, 23 Aug 2010, 09:21:35

Status changed to 'open'

Alex Mogilevsky, 23 Aug 2010, 09:22:18

Status changed to 'closed'

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


Peter Linss <peter.linss@hp.com>, Daniel Glazman <daniel.glazman@disruptive-innovations.com>, Chairs, Chris Lilley <chris@w3.org>, Bert Bos <bert@w3.org>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <w3t-sys@w3.org>.
$Id: index.php,v 1.323 2013-12-19 14:47:09 dom Exp $