Closed Bug 1319688 Opened 3 years ago Closed 3 years ago

[css-grid] Scroll auto not working on a fixed size track

Categories

(Core :: Layout, defect)

defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 1348857

People

(Reporter: rego, Assigned: mats)

References

(Blocks 1 open bug)

Details

Attachments

(4 files)

Attached file Testcase
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.59 Safari/537.36

Steps to reproduce:

Open the attached example.


Actual results:

The item doesn't have scrollbars.


Expected results:

I believe the expected behavior is that it has scrollbars.
That's the behavior in Chromium.
Attached image Current output
Attached image Expected output
Blocks: css-grid
Component: Untriaged → Layout
Product: Firefox → Core
Attached file tetscase #2
I added a non-grid container for comparison.
I don't see anything in the CSS Grid spec that says the cyan-colored boxes
should have different minimum sizes for these two cases.
Specifically, the "Implied Minimum Size of Grid Items" only applies to
items that have overflow:visible.
https://drafts.csswg.org/css-grid/#min-size-auto

Rego, can you point to the spec text that makes you think this is a bug
in Firefox please?
Assignee: nobody → mats
Flags: needinfo?(rego)
I'm not 100% sure I understand your comparison in the test,
why are you using an "inline-block" instead of a regular <div>?

Anyway I believe this comes from a report by you in Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=667057

I believe that if you have a fixed size cell and you put an element inside
with "overflow: auto", the user would expect the behavior in Chrome.
I guess what's causing that in grid is the default "stretch" behavior.

Also, I've made a new example comparing regular blocks, flex and grid:
http://jsbin.com/cuzijo/1/edit?html,css,output

For flexboxes, when overflow is visible the "Implied Minimum Size" applies
so the item is very big.
In grid, as the item is on a fixed track, that size is clamped.

Then when overflow is auto, both flexbox and grid behave the same in Chrome.
Using the size of the container (the flex container or the grid cell).
Flags: needinfo?(rego)
I believe that this issue is with intrinsic sizing. I've created a [CodePen](https://codepen.io/MrGrigri/pen/NpgObv?editors=0110) that showcases this issue. I am using max-content and flexible lengths for the width. The expectation is that the main body can scroll (chrome (v57), IE (v11), and Edge (v38) all create a scrollable area).

I'm using Firefox 52.0.2
Confirmed the issue had been fixed in Firefox 54.0[1] and it's supposed to be a dupe of bug 1348857.

[css-grid] Intristic content with overflow:auto overlaps in grid (bug 1348857).

[1] https://developer.mozilla.org/en-US/Firefox/Releases/54#CSS
Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1348857
You need to log in before you can comment on or make changes to this bug.