Flex columns don't resize when column count increase, only when resizing flex box width
Reported by
joolscha...@gmail.com,
Apr 29 2016
|
||||||||||
Issue descriptionChrome Version : 50.0.2661.94 m (64-bit) URLs (if applicable) : https://jsfiddle.net/JoolsCaesar/nkhjazy8/ Other browsers tested: Add OK or FAIL, along with the version, after other browsers where you have tested this issue: Safari: OK Firefox: OK IE: OK What steps will reproduce the problem? (1) Navigate to linked jsfiddle https://jsfiddle.net/JoolsCaesar/nkhjazy8/ (2) Click the "Shorter" button two or three times (3) What is the expected result? The columns should resize. What happens instead? The columns are added out of view. Please provide any additional information below. Attach a screenshot if possible. Changing the width of the scrollable div and therefore the flex-box fixes the layout issues. Click "Tickle my width" on the jsfiddle to see this.
,
Apr 29 2016
Note: Changing the width is an invisible (yet disgusting) work-around if you add and remove ~1/64th of a pixel from the scroller's width.
,
May 3 2016
@joolschadwick -- Thank You for the report. Could you please provide us a screen shot or screen cast explaining the exact issue which would help us triaging the issue further. Thanks in Advance.
,
May 3 2016
See the attached gif. It shows the above linked jsfiddle side by side in chrome (left) firefox (right). Firefox is showing the correct behaviour (the same as Safari and IE). The jsfiddle is a flex-box (using column wrap) list inside a scrollable container. Using the bottoms at the button of the jsfiddle you can make the scrollable container smaller so that a second column gets introduced. All other browsers then resize the columns. However Chrome doesn't resize the columns when you only change the container *height*. It only resizes them when you change the container *width*. The "Tickle my width" button adds and removes a pixel from the container, therefore triggering the resize that Chrome should have done already.
,
May 3 2016
Using the buttons at the bottom*
,
May 3 2016
I think this might be related to the following case: https://bugs.chromium.org/p/chromium/issues/detail?id=607262 The steps and symptoms are bit different, but it can worked around using the same hack of changing the width.
,
May 3 2016
Thank you for providing more feedback. Adding requester "msrchandra@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
,
May 3 2016
,
May 4 2016
@joolschadwick -- Thank You for the quick response. Able to reproduce the issue on Latest Stable# 50.0.2661.94 on Windows, Mac and Linux. This is a regression issue broken in M34, below is the CL: CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/4a55203bc97b03c28416bd640de0272d5a17e44f..ac7797414b1f49a0ce9bed37c43b6f6eec04f364 Thank You.
,
May 4 2016
There's a blink roll in there: 164685:164830 = 24f38e983c25faa340063dd8fa43cf710ac2b29d..8f80c85cd14c4ede4a6c0690b0879ba14660d2fc https://chromium.googlesource.com/chromium/src/+log/24f38e983c25faa340063dd8fa43cf710ac2b29d..8f80c85cd14c4ede4a6c0690b0879ba14660d2fc so many :(
,
May 4 2016
,
May 9 2016
,
Jun 1 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 15 2016
,
Jun 29 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce commit c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce Author: cbiesinger <cbiesinger@chromium.org> Date: Wed Jun 29 21:06:44 2016 [css-flexbox] childIntrinsicWidth needs to actually return the intrinsic width This function is used to determine the cross size of a flex line. If we just use .width() then it is potentially affected by a previous layout where we already stretched the child. To avoid that, switch to maxPreferredLogicalWidth() -- we already use that in childIntrinsicHeight, and we also use intrinsicContentLogicalHeight() for the height case. However, if we have a non-auto width, we can't necessarily just call maxPreferredLogicalWidth; the preferred width may not have percentages correctly resolved, for example. TEST=css3/flexbox/wrapping-column-dynamic-changes.html BUG= 607856 , 607262 Review-Url: https://codereview.chromium.org/2104123002 Cr-Commit-Position: refs/heads/master@{#402932} [add] https://crrev.com/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce/third_party/WebKit/LayoutTests/css3/flexbox/wrapping-column-dynamic-changes.html [modify] https://crrev.com/c83fe889c7045ad03b0b0a2e8d4fdcf1330d29ce/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Jun 29 2016
,
Jul 7 2016
Verified the issue on Latest Dev# 53.0.2785.8 on Windows, Mac and Linux and is working as intended. Hence addint TE-Verified Labels. Thank You. |
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by joolscha...@gmail.com
, Apr 29 2016