Flexbox Column Container with last div contains div with height 100% resize wrong when chrome window reduce
Reported by
marco.se...@gmail.com,
Feb 10 2017
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Steps to reproduce the problem: 1. set chrome window with fullscreen 2. set a container div with flex-direction : column 3. add flex : 1; to last div child 4. add other div into last div child with height: 100%; 5. clic in reduce button chrome window 6. the last div is too big 7. press F5 key, the last div is good size What is the expected behavior? What went wrong? When the window of chromium is reduced, the last div is resize badly. A refresh of the page corrects the problem. It's work perfet with Microsoft Edge and Internet Explorer 11 CodePen to reproduce this bug : http://codepen.io/marco93/full/xgyWVz/ PS : Sorry for my bad english Did this work before? N/A Does this work in other browsers? N/A Chrome version: 56.0.2924.87 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 24.0 r0
,
Feb 10 2017
it's works with firefox 51.0.1
,
Feb 10 2017
Bisect: 404031 (good) - 404056 (bad) https://chromium.googlesource.com/chromium/src/+log/eeda5899..e31affc4?pretty=fuller Suspecting r404056 "[css-flexbox] Don't over-invalidate flex items" Initially landed in 54.0.2791.0 Merged to 53.0.2785.11 Merged to 52.0.2743.71 Simplified repro steps: 1. resize Chrome window to half the screen width and half the screen height 2. navigate to http://codepen.io/marco93/full/xgyWVz/ 3. Enter fullscreen (F11 key) 4. Exit fullscreen (F11 key) EXPECTED: the outlined elements occupy 90% of window height regardless of window size OBSERVED: the outline elements height is retained from fullscreen mode and is too big thus scrollbars appear
,
Feb 13 2017
On Version 52.0.2743.116 m (64-bit) also doesn't work.
,
Feb 14 2017
,
Apr 5 2017
When a flex container is resized using jquery-ui resizable, the inner flex element does not shrink vertically. I think that's caused by this same bug. A click event inside the inner element seems to trigger a re-calculation of the layout. Js Fiddle: https://jsfiddle.net/fanqi1234/my0f7fuz/ Reproduced on Chromium Version 56.0.2924.76 Built on Ubuntu, and Google Chrome Version 57.0.2987.133 (64-bit). Works in Firefox and IE11.
,
Oct 26 2017
Another example (attached) of what is likely the same bug. A simple flexbox layout for a header and body with scrollable content. If the content WITHIN the "body" flex cell has 100% height and overflow:auto, it's all kinds of screwed up: * The "body" cell initializes to the height of the entire flex container, with a header-height-worth of content and scrollbar clipped off the bottom. * If I increase the height of the browser window, the "body" will grow, but it will not re-shrink upon making the browser window height smaller. If I remove the styling on the content within the "body", and instead apply overflow:auto directly to the "body", then the sizing/scrolling behavior of the "body" is correct.
,
Mar 16 2018
I can no longer reproduce this bug with: Google Chrome Version 63.0.3239.132 Chromium Version 65.0.3325.146
,
Mar 16 2018
the bug has been fixed by itself. I tried my codepen and now it works well
,
Mar 16 2018
It was fixed in 62.0.3187.0 Reverse bisect info: 494471 (bad) - 494498 (good) https://chromium.googlesource.com/chromium/src/+log/dde5c907..b4712b01?pretty=fuller Suspecting r494488 = c1bb58b26ee6e0d792f6e8aff9a3126cc2fa29af = https://crrev.com/c/612179 by mstensho@opera.com "When main axis is logical y, lay out flex items before getting intrinsic size."
,
Mar 18 2018
Thanks for confirming that! |
|||
►
Sign in to add a comment |
|||
Comment 1 by ligim...@chromium.org
, Feb 10 2017