New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 607856 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Jun 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Flex columns don't resize when column count increase, only when resizing flex box width

Reported by joolscha...@gmail.com, Apr 29 2016

Issue description

Chrome 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.
 
Note: columns do resize when the number of columns decreases, just not when it increases.
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.
Cc: msrchandra@chromium.org
Labels: Needs-Feedback
@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.
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.
flex colum resize.gif
393 KB View Download
Using the buttons at the bottom*
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.
Project Member

Comment 7 by sheriffbot@chromium.org, May 3 2016

Labels: -Needs-Feedback Needs-Review
Owner: msrchandra@chromium.org
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
Components: Blink>Layout>Flexbox
Labels: Needs-Bisect
Labels: -Needs-Review -Needs-Bisect M-52 OS-Linux OS-Mac OS-Windows
Owner: ----
Status: Untriaged (was: Unconfirmed)
@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.

Comment 12 by e...@chromium.org, May 9 2016

Status: Available (was: Untriaged)
Project Member

Comment 13 by sheriffbot@chromium.org, Jun 1 2016

Labels: -M-52 M-53 MovedFrom-52
Moving this nonessential bug to the next milestone.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: Hotlist-Fixit
Project Member

Comment 15 by bugdroid1@chromium.org, 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

Status: Fixed (was: Available)
Labels: TE-Verified-53.0.2785.8 TE-Verified-M53
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