1200261 - flexbox flex-growth ignored when 0s are mixed with decimals

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Bob Hutzel]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150826023504

Steps to reproduce:

Create three divs within a flexbox container. Set their flex-grow styles to 0, 0.6, and 0 respectively. 

    <div style="display: flex;">
      <div style="flex-grow: 0.0; background-color: purple;">LEFT</div>
      <div id="center" style="flex-grow: 0.6;">CENTER</div>
      <div style="flex-grow: 0.0; background-color: purple;">RIGHT</div>
    </div>

Example: http://plnkr.co/edit/sdBHP0FZGXZ8yfCRRZ6P?p=preview


Actual results:

The center div does not grow to fill the remaining width. This is the case in both "Firefox 40.0.3" and "Nightly 43.0a1 (2015-08-30)" on Windows 7. A workaround is to use integer flex-grow values instead of decimals (i.e. 0, 6, 0).


Expected results:

The center div should have grown to fill the remaining width. Chrome renders this properly. The specification confirms that the flex-grow value can be a decimal: http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow

Comment 1

[Daniel Holbert [:dholbert]]

This is expected behavior. Fractional flex values (between 0 and 1) are special -- "flex: 0.6" means "grow, but don't take up more than 60% of the available space", basically.  If you don't want this behavior, don't use flex values between 0 and 1.

(The reason for this behavior is it allows you to transition between "flex: 0" and "flex: [whatever]" smoothly, rather than snapping from none-of-the-space to all-of-the-space as soon as you transition to an intermediate nonzero value.)

I implemented this in bug 985304. Chrome hasn't implemented it yet, as far as I know, though I filed https://code.google.com/p/chromium/issues/detail?id=480752 to prompt them to do so.

Comment 2

[Daniel Holbert [:dholbert]]

The spec text for this is here:
  http://dev.w3.org/csswg/css-flexbox-1/#resolve-flexible-lengths
...and the relevant sentence is:
 # If the sum of the unfrozen flex items’ flex factors
 # is less than one, multiply the initial free space
 # by this sum.

So in your example (with the flex-grow values summing to 0.6), we multiply the free space by 0.6, i.e. we only distribute 60% of the initial free space.  (And if you'd used 0.1, we'd only distribute 10% of the free space.)

This enables smooth animation of flex-grow in examples like this one (which snaps between values in Chrome but animate smoothly in Firefox): https://jsfiddle.net/0c28uaud/2/