New issue
Advanced search Search tips

Issue 890278 link

Starred by 0 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

[css-grid] Item with percentage height and overflow scroll not working fine on a 1fr grid row

Reported by n.nafran...@digitalhorizon.ru, Sep 28

Issue description

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

Steps to reproduce the problem:
1. go to https://codepen.io/dimensi/pen/pxoLNv
2. open in chromium

What is the expected behavior?
Overflow must work

What went wrong?
Overflow no working and flexbox wrong calculating child items

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: stable
OS Version: OS X 10.14.0
Flash Version: 

Check how it's work in firefox
 
img-2018-09-28-14-13-05.png
5.4 KB View Download
Components: Blink>Layout>Grid
Labels: -OS-Mac
Labels: Needs-Triage-M69
Cc: svil...@igalia.com r...@igalia.com
Status: Available (was: Unconfirmed)
Hi,

Want to look into this, can you assign?
Cc: jfernan...@igalia.com
Owner: r...@igalia.com
Status: Assigned (was: Available)
Summary: [css-grid] Item with percentage height and overflow scroll not working fine on a 1fr grid row (was: Overflow not working in grid layout)
I'm fine if you want to take a look, there seem to be issues in Chromium and Firefox.
I cannot assign it to you, so I'm adding myself as owner,
but I won't be working on this, I'd just be following your progress here.

Check this example:
https://jsbin.com/fawabav/1/edit?html,css,output

I believe behavior in 2.A) is wrong in Chromium.
And behavior in 1.B) is wrong in Firefox.

The problem is that a "1fr" row is equivalent to "minmax(auto, 1fr)",
and the item has by default "min-height: auto",
so that forces the row to be as tall as the item's height.

Then when you have scrollbar "min-height: auto" doesn't apply,
so the row should only use the avialable space.


Mmmm, probably I spoke too fast.
When we have "height: 100%" on the item, I don't think the "min-height: auto" should have any effect. So 1.A) is probably bad in Chromium and Firefox.
2.A) seems wrong in Chromium too.

All this stuff is quite complex, so we need to debug properly the track sizing algorithm
to understand the issue.

Owner: obru...@igalia.com

Sign in to add a comment