Issue metadata
Sign in to add a comment
|
fractional flex factors <1 interact poorly with max-width
Reported by
pgrevi...@gmail.com,
Jun 7 2016
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2757.0 Safari/537.36 Example URL: https://jsfiddle.net/Kredit/07uy7chs/1/ Steps to reproduce the problem: 1. Open https://jsfiddle.net/Kredit/07uy7chs/1/ 2. Grab the resize handle on the div labelled "Resizable" 3. Drag right so the div is over 150px wide 4. Continue dragging right and note the "Flex" div is shrinking What is the expected behavior? To not keep resizing the Flex div after the Resizable div has reached 150px. What went wrong? It seems as though flexible boxes with flex-grow set to a number between 0 and 1 do not take max-width into account when reflowing. I tested this in Firefox 48, where it stops adjusting the width as expected. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 53.0.2757.0 Channel: canary OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 22.0 r0 This is an extreme edge case as a result of some weird hacking with resizable flex panes. I highly doubt this problem has appeared anywhere else ever, since it relies on max-width being set, a flex-grow value between 0 and 1, and at least resize: horizontal.
,
Jun 8 2016
==================================== Good Build: 49.0.2567.0 Base Position: 360248 Bad Build: 49.0.2590.0 Base Position: 364940 ===================================== Able to repro this issue on Windows 7, MAC (10.11.5) & Ubuntu Trusty (14.04) for the Google Chrome Stable Version - 51.0.2704.84 This is a regression issue broken in M49, below mentioned is the bisect info: CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/6b5d01a9e568040f653dd8e4e13f69d08d49af91..05b2541bf80de9eac7aeb6af29baaef6082eb61f Suspecting Commit: 36921b28f83a30d8d0caaa408b1586afed2ca323 Review URL: https://codereview.chromium.org/1470373003 @cbiesinger: Could you please look into the issue, and if it has nothing to do with your changes and if possible please do assign it to the concerned owner. Thank you.
,
Jun 8 2016
,
Jun 8 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 8 2016
,
Jun 14 2016
You don't even need the resizable part, you can just use width: 330px or something: https://jsfiddle.net/07uy7chs/2/
,
Jun 14 2016
We're not implementing the flex algorithm correctly. We need to freeze inflexible items (including items with flex base > max-width) *before* entering the loop. https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp?sq=package:chromium&rcl=1465874539&l=859
,
Jun 14 2016
,
Jun 27 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/143408653a5c0328254ea06d0f3a825d6505a114 commit 143408653a5c0328254ea06d0f3a825d6505a114 Author: cbiesinger <cbiesinger@chromium.org> Date: Mon Jun 27 21:06:56 2016 [css-flexbox] Correctly implement freezing of inflexible items We did not have a correct implementation of steps 2 and 3 of the "9.7 Resolving flexible lengths" section of the spec: https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths In particular inflexible items (flex factor 0 or flex basis violating the min/max size constraint) reduce the initial free space. This is an issue when sizing flex items with a flex factor of 0..1. BUG= 617956 TEST=css3/flexbox/max-width-violation.html Review-Url: https://codereview.chromium.org/2096943004 Cr-Commit-Position: refs/heads/master@{#402279} [add] https://crrev.com/143408653a5c0328254ea06d0f3a825d6505a114/third_party/WebKit/LayoutTests/css3/flexbox/max-width-violation.html [modify] https://crrev.com/143408653a5c0328254ea06d0f3a825d6505a114/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp [modify] https://crrev.com/143408653a5c0328254ea06d0f3a825d6505a114/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.h
,
Jun 27 2016
Should be fixed in tomorrow's Canary
,
Jun 27 2016
Great work, thank you very much!
,
Jun 28 2016
Verified the fix on Windows 7, MAC (10.11.5) & Ubuntu Trusty (14.04) for Google Chrome Canary Version - 53.0.2782.0 Screen-recording is attached. TE-Verified labels are added.
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by pgrevi...@gmail.com
, Jun 7 2016188 KB
188 KB View Download
240 KB
240 KB View Download