Issue metadata
Sign in to add a comment
|
Grid layout doesn't calculate 'auto' and 'fr' for row height correctly if used in flex-box with grow: 1
Reported by
david.eb...@unblu.com,
Nov 20 2017
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Steps to reproduce the problem: 1. Open: https://codepen.io/anon/pen/rYJzdR or open attached file 2. See the height used by the 'auto' and '*fr' rows. What is the expected behavior? The 2 rows that have *fr set should grow, the rows using auto should not grow. What went wrong? The 2 rows that have *fr set should grow, the rows using auto should not grow. However the rows that have 'auto' set are the ones growing. Firefox (v57) renders the result correctly. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 62.0.3202.94 Channel: stable OS Version: OS X 10.12.6 Flash Version:
,
Nov 20 2017
,
Nov 20 2017
,
Nov 21 2017
Able to reproduce the issue on the reported version 62.0.3202.94 (please find atatched screenshot 786986_62.0.3202.94 for your reference) Showing different behavior on latest build 64.0.3274.0 and 50.0.2641.0 which does not match excepted behavior (please find attached screenshot 786986_64.0.3274.0 and 786986_50.0.2641.0 for your reference) Hence making it as non-regression
,
Nov 21 2017
++Adding screenshot
,
Nov 30 2017
,
Mar 12 2018
I ran into this issue on my own project. User agent string: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36 I don't know how valuable this is, but while investigating, I found out that setting flex-direction to "row" (even in the original CodePen) will work around this issue, so I believe this is only a problem with flex-direction: column.
,
Mar 14 2018
The problem is that a bug in flexbox (see issue #784059 ) makes grid layout to consider that the height is indefinite and not definite. As a workaround you can add "flex-basis: 0" and it'll work. Another option could be to replace "flex-grow: 1" by "flex: 1". |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 Deleted