Element with display:table and fixed width doesn't expand when it's content has a bigger fixed width and everything is wrapped inside a flex container.
Reported by
ar...@arima.eu,
Mar 14 2018
|
||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36 Example URL: https://jsfiddle.net/m4zvhszk/14/ Steps to reproduce the problem: 1. See this fiddle https://jsfiddle.net/m4zvhszk/14/ What is the expected behavior? The div with the class "container" should be 300px width because even though it's width is set to 10px, it's display is "table" and has a 300px width child. What went wrong? The div with display table doesn't expand when it's inside a flex container. I attached 2 pictures: the first one shows the expected behavior in Chrome 64 and the second one is what I'm getting in Chrome 65. Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? Yes 64 Does this work in other browsers? Yes Chrome version: 65.0.3325.146 Channel: stable OS Version: 7 Flash Version:
,
Mar 14 2018
,
Mar 15 2018
Able to reproduce the issue on Windows 10, mac 10.13.3 and Ubuntu 14.04 using chrome reported version #65.0.3325.146 and latest canary #67.0.3370.0. Bisect Information: ===================== Good build: 65.0.3287.0 Bad Build : 65.0.3288.0 Change Log URL: https://chromium.googlesource.com/chromium/src/+log/20bea7a6..c62ed353?pretty=fuller From the above change log suspecting below change Change-Id: Ifcea6af51ce5bf74377f93b5cd0437272a5c7ef0 Reviewed-on: https://chromium-review.googlesource.com/781859 mstensho@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner. Note: Adding stable blocker for M-65 as it seems to be a recent regression. Please feel free to remove the same if not appropriate. Thanks...!!
,
Mar 15 2018
Not quite sure what to do about this. There's nothing in the spec that suggest that this is indeed a valid bug. The test does render as the author intends in Edge and Firefox, though, but that seems to be because those browsers don't support flexing of table flex items at all. Discussion here: https://github.com/w3c/csswg-drafts/issues/2442 Lowering the priority as long as this isn't known to affect any real site.
,
Mar 15 2018
Thanks for opening the discussion thread. The spec isn't clear about this specific case but it is actually affecting our site. This is what happened to some of our dialogs after upgrading Chrome to the latest stable version (I blurred the irrelevant parts).
,
Mar 15 2018
Would an acceptable work-around for you be to leave the table width at auto, rather than specifying something that's too narrow?
,
Mar 15 2018
Thanks for the suggestion, We thought about setting the width auto at first but there are a lot of dialog windows on our site and that change would have broken some of them. The only feasible workaround in our case is to change the display:flex of the container to display:table. That (with some additional minor changes) should fix the problem. Let’s see what the w3c says about the expected behavior in this scenario.
,
Mar 15 2018
,
Mar 15 2018
Issue 821726 has been merged into this issue.
,
Mar 15 2018
Propagating priority and label from duplicate.
,
Mar 16 2018
Based on offline chat and email with Morten and Emil we aren't blocking M65 on this issue,but leaving the blocker label so that fix can be landed on M66.
,
Mar 16 2018
Removing "M-65" per comment #11.
,
Mar 26 2018
Still we are seeing the same issue on latest canary-67.0.3379.0 ,beta-66.0.3359.45 & dev-67.0.3377.1 as per C#0. mstensho@, Please take a look into this as it is marked as RBS. Thanks..!
,
Mar 26 2018
I really wanted some more feedback on the code review and spec side, but haven't got that much. There was one comment that we perhaps should just let the table overflow the space reserved for the flex item, which could also work, but nothing has been resolved yet. So I'm just going to land the fix that's been ready for more than a week already. If the spec gets clarified in this regard, we can fix it when it happens.
,
Mar 26 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/fdc7d6d5aaa66bff1edaf37b8b7bb17ca0ba39c0 commit fdc7d6d5aaa66bff1edaf37b8b7bb17ca0ba39c0 Author: Morten Stenshorne <mstensho@chromium.org> Date: Mon Mar 26 13:52:27 2018 [css-flexbox] Resolve min-width:auto on table item to min preferred size. Edge and Firefox seem to let table flex items use the sizing algorithm of the table extensively, and are therefore generally broken when it comes to flexing tables. We, on the other hand, let the flex sizing algorithm be in charge of sizing tables, so that flexing actually works. However, this causes tables with a specified main size of less than the minimum intrinsic logical width of the table to shrink below their minimum intrinsic logical width, a situation that's generally unwanted for tables. Amend by ignoring the specified main size when resolving min-width:auto on table items. Also ignore max-width/max-height. Just use the preferred minimum logical width. Bug: 821832 Change-Id: I78ca0c8e0041ea69bb606ff72d340bb3f5f9bb96 Reviewed-on: https://chromium-review.googlesource.com/964203 Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#545777} [add] https://crrev.com/fdc7d6d5aaa66bff1edaf37b8b7bb17ca0ba39c0/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-auto-min-width.html [modify] https://crrev.com/fdc7d6d5aaa66bff1edaf37b8b7bb17ca0ba39c0/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp
,
Mar 26 2018
,
Mar 26 2018
[Auto-generated comment by a script] We noticed that this issue is targeted for M-66; it appears the fix may have landed after branch point, meaning a merge might be required. Please confirm if a merge is required here - if so add Merge-Request-66 label, otherwise remove Merge-TBD label. Thanks.
,
Mar 26 2018
,
Mar 26 2018
,
Mar 27 2018
This bug requires manual review: M66 has already been promoted to the beta branch, so this requires manual review Please contact the milestone owner if you have questions. Owners: cmasso@(Android), cmasso@(iOS), josafat@(ChromeOS), abdulsyed@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Mar 27 2018
Approving it for M66 merge. Branch:3359
,
Mar 27 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f30249edf28c5af0e84035610e990dc7f2beaba5 commit f30249edf28c5af0e84035610e990dc7f2beaba5 Author: Morten Stenshorne <mstensho@chromium.org> Date: Tue Mar 27 18:36:45 2018 [css-flexbox] Resolve min-width:auto on table item to min preferred size. Edge and Firefox seem to let table flex items use the sizing algorithm of the table extensively, and are therefore generally broken when it comes to flexing tables. We, on the other hand, let the flex sizing algorithm be in charge of sizing tables, so that flexing actually works. However, this causes tables with a specified main size of less than the minimum intrinsic logical width of the table to shrink below their minimum intrinsic logical width, a situation that's generally unwanted for tables. Amend by ignoring the specified main size when resolving min-width:auto on table items. Also ignore max-width/max-height. Just use the preferred minimum logical width. Bug: 821832 Change-Id: I78ca0c8e0041ea69bb606ff72d340bb3f5f9bb96 Reviewed-on: https://chromium-review.googlesource.com/964203 Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#545777}(cherry picked from commit fdc7d6d5aaa66bff1edaf37b8b7bb17ca0ba39c0) Reviewed-on: https://chromium-review.googlesource.com/980855 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/branch-heads/3359@{#465} Cr-Branched-From: 66afc5e5d10127546cc4b98b9117aff588b5e66b-refs/heads/master@{#540276} [add] https://crrev.com/f30249edf28c5af0e84035610e990dc7f2beaba5/third_party/WebKit/LayoutTests/external/wpt/css/css-flexbox/table-as-item-auto-min-width.html [modify] https://crrev.com/f30249edf28c5af0e84035610e990dc7f2beaba5/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp |
||||||||||||||||
►
Sign in to add a comment |
||||||||||||||||
Comment 1 by woxxom@gmail.com
, Mar 14 2018