Multi-column element inside horizontally scrolling flex item is too tall by scrollbar height
Reported by
ande...@mit.edu,
Oct 2 2017
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.38 Safari/537.36 Example URL: https://jsfiddle.net/anderskaseorg/o7jxvzwy/ Steps to reproduce the problem: This jsfiddle shows three nested divs with #outer { height: 10em; display: flex; } #middle { overflow-x: scroll; } #inner { height: 100%; column-count: 2; } What is the expected behavior? The height of #inner should be the height of #middle excluding its horizontal scrollbar, so no vertical scrollbar is necessary. (That’s what happens if you give #middle an explicit height rather than the height computed from the flexbox.) What went wrong? The height of #inner is miscomputed as the height of #middle including its horizontal scrollbar, which is too tall to fit in #middle, forcing a vertical scrollbar to appear. 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: 62.0.3202.38 Channel: beta OS Version: Ubuntu 17.10 Flash Version: Firefox shows the correct behavior.
,
Oct 3 2017
Able to reproduce this issue with steps mentioned in comment#0 on reported version 60.0.3112.113 , on latest stable 61.0.3163.100 and on latest canary 63.0.3225.0 using Mac 10.12.6, Ubuntu 14.04 and Windows 10. Manual Bisect Info: =============== Good Build: 52.0.2712.0 Bad Build: 52.0.2713.0 You are probably looking for a change made after 388306 (known good), but no later than 388308 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/8b12c85c1af2fcab6b0f04d201d4d45144a34ea9..0702247984d85e123f0ad2074e69743c710050ad @cbiesinge: Please confirm the bug and help in re-assigning to correct owner if it is not related to your change. Thanks!!
,
Oct 3 2017
,
Oct 3 2017
,
Oct 3 2017
,
Nov 20 2017
,
Nov 20 2017
Ah hm, this probably needs to subtract the scrollbar: + // Here we implement https://drafts.csswg.org/css-flexbox/#algo-stretch + if (hasOrthogonalFlow(child) && child.hasOverrideLogicalContentWidth()) + return child.overrideLogicalContentWidth(); + if (!hasOrthogonalFlow(child) && child.hasOverrideLogicalContentHeight()) + return child.overrideLogicalContentHeight();
,
Nov 23 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/ad34d927de079ce7b631c2f343a866469b060d54 commit ad34d927de079ce7b631c2f343a866469b060d54 Author: Christian Biesinger <cbiesinger@chromium.org> Date: Thu Nov 23 02:48:02 2017 [css-flexbox] Need to subtract the scrollbar for the override size The override size does not in fact include the scrollbar, so we need to subtract it before returning it as the base for the percentage size calculation. R=mstensho@chromium.org Bug: 770604 Change-Id: I5eb50eaedc4e32d676b550c4c10e2d7b8e9d604b Reviewed-on: https://chromium-review.googlesource.com/780519 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#518831} [add] https://crrev.com/ad34d927de079ce7b631c2f343a866469b060d54/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/percentage-heights-004-ref.html [add] https://crrev.com/ad34d927de079ce7b631c2f343a866469b060d54/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/percentage-heights-004.html [modify] https://crrev.com/ad34d927de079ce7b631c2f343a866469b060d54/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Nov 23 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by manoranj...@chromium.org
, Oct 2 2017