ISSUE-144: distribution of negative available space

distribution of negative available space

CSS3 Flexbox
Raised by:
Alex Mogilevsky
Opened on:
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.

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 on 2010-08-31)
  2. Re: [css3-flexbox] issues resolved in FTF (from on 2010-08-25)
  3. [css3-flexbox] issues resolved in FTF (from on 2010-08-25)
  4. ISSUE-144: distribution of negative available space (from 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

Display change log ATOM feed

Alan Stearns <>, Rossen Atanassov <>, Chairs, Chris Lilley <>, Bert Bos <>, Thierry Michel <>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <>.
$Id: index.php,v 1.325 2014-09-10 21:42:02 ted Exp $