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

Issue 821832 link

Starred by 6 users

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

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 description

UserAgent: 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:
 
chrome 64.png
10.4 KB View Download
chrome 65.png
12.6 KB View Download

Comment 1 by woxxom@gmail.com, Mar 14 2018

Bisect info: 522405 (good) - 522409 (bad)
https://chromium.googlesource.com/chromium/src/+log/20bea7a6..c62ed353?pretty=fuller
Suspecting r522408 = eee88582b5300e34aa2ea56bc5da17457e67aa00 = https://crrev.com/c/781859 by mstensho@chromium.org
"Avoid table sizing peculiarities for flex and grid items."
Landed in 65.0.3288.0
Labels: Needs-Bisect Needs-Triage-M65
Components: Blink>Layout>Table
Labels: -Pri-2 -Type-Compat -Needs-Bisect ReleaseBlock-Stable Target-67 Triaged-ET RegressedIn-65 M-65 M-66 FoundIn-66 FoundIn-67 Target-65 FoundIn-65 Target-66 hasbisect OS-Linux OS-Mac Pri-1 Type-Bug-Regression
Owner: mstensho@chromium.org
Status: Assigned (was: Unconfirmed)
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...!!
Labels: -Pri-1 Pri-2
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.

Comment 5 by ar...@arima.eu, 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).
2018-03-13.png
113 KB View Download
Would an acceptable work-around for you be to leave the table width at auto, rather than specifying something that's too narrow?

Comment 7 by ar...@arima.eu, 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. 

Comment 8 by e...@chromium.org, Mar 15 2018

Labels: -ReleaseBlock-Stable -Via-Wizard-Content -Needs-Triage-M65 -Target-65 -Target-66 -Target-67
Cc: e...@chromium.org mstensho@chromium.org bokan@chromium.org sahel@chromium.org pbomm...@chromium.org mcnee@chromium.org gov...@chromium.org
 Issue 821726  has been merged into this issue.
Labels: -Pri-2 ReleaseBlock-Stable Pri-1
Propagating priority and label from duplicate.
Cc: abdulsyed@chromium.org
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. 
Labels: -M-65
Removing "M-65" per comment #11.
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..!

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.
Project Member

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

Status: Fixed (was: Assigned)
Labels: Merge-TBD
[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.
Labels: Merge-Request-66
Labels: -Merge-TBD
Project Member

Comment 20 by sheriffbot@chromium.org, Mar 27 2018

Labels: -Merge-Request-66 Merge-Review-66 Hotlist-Merge-Review
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
Labels: -Merge-Review-66 Merge-Approved-66
Approving it for M66 merge. Branch:3359
Project Member

Comment 22 by bugdroid1@chromium.org, Mar 27 2018

Labels: -merge-approved-66 merge-merged-3359
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