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
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INVALID
Component: Untriaged → Layout
Depends on: 985304
Product: Firefox → Core
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/
You need to log in before you can comment on or make changes to this bug.