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

Issue 801725 link

Starred by 1 user

Issue metadata

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



Sign in to add a comment

[css-grid] CSS Grid's minmax() breaks with explicit style size on child elements

Reported by a...@parsols.com, Jan 12 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce the problem:
1.  Create container with CSS Grid: display: grid;
2.  Add 4 columns to container and use minmax for the middle columns: grid-template-columns: 1fr repeat(2, minmax(auto, 300px)) 1fr;

You should now get a responsive and centered container with max width of 600px.  

3. Force and element inside the container to have a width larger than 600px by adding the style attribute: style="width: 800px"

4. Now you see that the container is stretched to 800px.

What is the expected behavior?
The expected behaviour for minmax() is not allow the container to stretch bigger than the set max value of 600px. 

What went wrong?
If you simply set the two middle column widths to be 300px like so:

grid-template-columns: 1fr repeat(2, 300px) 1fr;

It works as it should but this container wouldn't be responsive since it will always be 600px. We need the minmax() property to work correctly. 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 63.0.3239.132  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

Other browsers like Firefox do this correctly. Chrome seems to have a bug here. I hope this can be fixed soon because responsive containers are a big deal in web development and CSS Grid is being used more often. We're in fact trying to use it in production now.
 
index.html
2.4 KB View Download

Comment 1 by a...@parsols.com, Jan 12 2018

Here's a screenshot of the index.html file I've attached which replicated the problem.
Screen Shot 2018-01-12 at 6.10.14 PM.png
64.2 KB View Download
Labels: Needs-TestConfirmation
The example appears to behave the same way in Firefox for me.

Comment 3 Deleted

Comment 4 by a...@parsols.com, Jan 15 2018

The website I was working on originally where I encountered this behavior did not show this bug in FireFox, only in Chrome. However when I made this example I did not test it again in FireFox. And you're right my example is behaving the same in FireFox. But it shouldn't matter if setting explicit widths works like so: 
grid-template-columns: 1fr repeat(2, 300px) 1fr;

Then the max part of minmax() should behave the same way shouldn't it? Right now my workaround is to go inside the container and locate the inner box and set a max-width of 600px which seems redundant.
Cc: krajshree@chromium.org
Labels: -Needs-TestConfirmation Needs-Feedback Triaged-ET Needs-Triage-M63
Tested the issue on Mac 10.12.6 using chrome reported version #63.0.3239.132.

Attached a screen cast for reference.

Following are the steps followed to reproduce the issue.
------------
1. Opened the attached file index.html.
2. Observed a static image which showed the results as in the attached screenshot "Screen Shot 2018-01-12 at 6.10.14 PM.png".

amir@ - Could you please verify the screencast and please let us know if anything else need to be done from our end to reproduce the issue. Any further inputs will help us in triaging the issue further.

Thanks...!!
801725.mp4
524 KB View Download

Comment 6 by a...@parsols.com, Jan 16 2018

This is it! The only other thing would be to resize the screen, it should be responsive and the pinkish container should auto-resize and shrink to fit the browser once the viewport is small enough but this bug is causing it to stay at that expanded width. 
Project Member

Comment 7 by sheriffbot@chromium.org, Jan 16 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: sc00335...@techmahindra.com
Labels: Needs-Feedback
Tested the issue on reported version 63.0.3239.132, on latest canary 65.0.3322.3 and older build M55 using Mac 10.13.1 and below are observations.

In M55 opened added HTML file and resized browser window -- Observed Overflow of green box style="width:800px"

In M63 and M65 observed both pink area and green area stretched. Attaching screencast for reference.

@Reporter: Please check the screencast and let us know if we miss anything. If possible please guide us with expected  behaviour screeshot/screencast. This would help in further triaging of the issue.

Thanks!
801725.mp4
2.6 MB View Download

Comment 10 by a...@parsols.com, Jan 17 2018

On canary 65.0.3323.0 I tested the current behavior and then with some in-browser hacking I was able to show expected behavior as well. 

Basically when you set minmax(auto, 600px) you expect the pink box to shrink with the viewport and be responsive due to min part of minmax() being set to 'auto' and you expect the same box not to grow any larger than 600px because of the max value was explicitly set to '600px'. however it seems like and overflow element can break both min and  max value and neither would work correctly as demonstrated. 
minmax.mov
13.6 MB Download
Project Member

Comment 11 by sheriffbot@chromium.org, Jan 17 2018

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "sc00335628@techmahindra.com" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Able to reproduce the issue on reported version 63.0.3239.132 and latest canary 65.0.3323.0 using Mac 10.13.1, Ubuntu 14.04 and Windows-10 hence providing Bisect Info

Bisect Info:
================
Good build: 57.0.2928.0
Bad build: 57.0.2929.0

You are probably looking for a change made after 433852 (known good), but no later than 433853 (first known bad).

https://chromium.googlesource.com/chromium/src/+log/c11607a50691c6da823467bb389d14f659433c77..79bd413143afe5ad68104a3c99b9c04f64fc25ac

Review-Url: https://codereview.chromium.org/2521953002

@rego: Please confirm the issue and help in re-assigning if it is not related to your change.

Thanks!
Cc: viswatej...@techmahindra.com
Components: Blink>Layout>Grid
Labels: -Type-Bug -Pri-2 hasbisect-per-revision M-65 Target-65 FoundIn-64 FoundIn-65 FoundIn-63 OS-Linux OS-Windows Pri-1 Type-Bug-Regression
Owner: r...@igalia.com
Status: Assigned (was: Unconfirmed)

Comment 14 by r...@igalia.com, Jan 18 2018

Components: -Blink>CSS
Status: WontFix (was: Assigned)
Summary: [css-grid] CSS Grid's minmax() breaks with explicit style size on child elements (was: CSS Grid's minmax() breaks with explicit style size on child elements)

This is the expected behavior, so this is not a bug.
Imagine you have a column "minmax(auto, 200px)" and it has an element with "width: 400px",
the size of the column is going to be 400px. It'd be something like minmax(400px, 200px),
and min wins over max, like in other places in CSS (min-width and max-width).

See the text in the spec (https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax):
"If max < min, then max is ignored and minmax(min,max) is treated as min."

I believe you could use "grid-template-columns: 1fr repeat(2, minmax(0px, 300px)) 1fr;"
in your example to get the behavior you're looking for.

BTW, some other comments:
* This is working the same in all browsers: Chrome, Firefox, Edge and Safari.
* This is not a regression as it has been working like this since Grid Layout was enabled,
  in the commit pointed in the previous comment.

Comment 15 by a...@parsols.com, Jan 22 2018

You are correct, it seems like the proper min value for a container should be 0px rather than auto because according to the spec min can become more than max. I stand corrected, this is not a bug. 

Sign in to add a comment