Issue metadata
Sign in to add a comment
|
FlexBox sizing broken
Reported by
perec...@gmail.com,
Apr 24 2016
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0 Example URL: Steps to reproduce the problem: 1. Have a FlexBox container with "flex-direction: row;" or "flex-direction: column;" and "display: flex;" 2. Have two or more child items with "flex: 1;" What is the expected behavior? All child flex items should be proportionally sized and not depend on their content for sizing.So if two flex items are set to "flex: 1;", they should each size to 50%. If there are three flex items with "flex: 1;", they should each be 33.3%. If there are two, one with "flex: 1;" and one with "flex: 2;", then one should be 33.3% and the other 66.6% respectively. Instead the size varies on the content they each contain rather than the defined CSS. What went wrong? Sizing changes based on content of flexbox items rather than given "flex: x" CSS proportions. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 50.0.2661.87 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 21.0 r0 When using CSS "Flex: #" to specify proportionality, Chrome doesn't respect the given sizes of the flex items. Instead it uses its contents to determine size.
,
Apr 25 2016
,
Apr 26 2016
Yes, please provide a testcase. Also, try using "min-width: 0; min-height: 0;" and see if that makes a difference. This could also be related to bug 240765
,
Apr 26 2016
Yes I did try "min-width: 0; min-height: 0;" and does not fix it. I will have a sample shortly.
,
Apr 26 2016
The problem does not exhibit in neither jsbin nor jsfiddle. I have attached an html page you can try out. All boxes should be the same size. Instead you will see them in all different sizes based on their content. You can test with Firefox, Safari, IE11, Edge, etc. They all render the same thing - all boxes equal size. Only Chrome fails to do this.
,
Apr 26 2016
Thank you for providing more feedback. Adding requester "ashejole@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 26 2016
This works on dev. It's probably due to the fix for percentages in children of flex items -- the 0% flex-basis is now considered definite. Yep, confirmed by bisect -- https://chromium.googlesource.com/chromium/src/+/0c12856b59827e462642d3ed8ce2d7042bcf7218 pereclix, this will be fixed in Chrome 51, but you also have a few options for solving this issue in Chrome 50. You can specify flex-basis: 0; in your .FlexItemAuto declaration (do this after your flex: 1;). You can also specify an explicit height: 100%; on .FlexContVert. Those two are probably your best options. Note that instead of specifying flex: 1 and flex-shrink (and now flex-basis) separately you can just say: flex: 1 100000 0;
,
Apr 26 2016
Setting any element to 100% height down stream of any parents using flexbox will not work and in fact points out another long standing Chrome bug that breaks with all other browsers. See attached demo. I have been struggling with this one for years but at least I have an ugly javascript + shim workaround for this. It would be nice if this bug would be fixed too.
,
Apr 26 2016
Yes, that bug is also fixed in Chrome 51, think that's also bug 341310 . You can verify by downloading Chrome Canary or using the beta or dev channel. Again, you can use the flex-basis suggestion instead if you want (at least in the specific testcase you provided)
,
Apr 26 2016
Yes flex-basis: 0; does solve the issue until 51 release. Thanks. When will v51 be released?
,
Apr 26 2016
In about 5-6 weeks, give or take.
,
Apr 28 2016
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by ashej...@chromium.org
, Apr 25 2016Labels: Needs-Feedback