1525310 - CSS Grid does not respect assigned minmax space in final row of template

Status: RESOLVED INVALID

(Core :: Layout: Grid, defect)

Description

[charbel]

Attachment: firefoxbug.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

I have a CSS stylesheet with the following:

#container {
display: grid;
height: 100vh;
width: 100vw;
overflow: auto;
grid-template-columns: 1fr 20vw 1rem 20vw 1rem 20vw 1fr;
grid-template-rows: 2rem auto 1rem 3rem 1rem 3rem 1rem auto minmax(2rem, 1fr);
grid-template-areas:
". . . . . . ."
". header header header header header ."
". . . . . . ."
". formtext formtext formtext . offsetnumber ."
". . . . . . ."
". ciphersubmit . deciphersubmit . resetbutton ."
". . . . . . ."
". textresult textresult textresult textresult textresult ."
". . . . . . .";
}

Please check www.charbelnicolas.com/cipher

Actual results:

In the grid-template-rows, I have assigned "minmax(2rem, 1fr);" for the last row but when the website becomes small enough to trigger a vertical scrollbar, the "textresult" cells will touch the bottom part of the browser window even there is a min space set of 2rem.

This works correctly in Google Chrome BTW.

Please check www.charbelnicolas.com/cipher

Expected results:

There should be a 2rem space in between the browser bottom and the "textresult" cell.

Please check the attached image.

And also check www.charbelnicolas.com/cipher using google chrome.

Comment 1

[Alice0775 White]

FYI, Edge EdgeHTML 18.17763 shows same behavior of Nightly67.0a1.

Comment 2

[charbel]

Hello Alice, EdgeHTML has been discontinued, I wouldn't use it as a reference personally. I just checked Firefox nightly and it has the same buggy behavior as Firefox 65.

Google chrome seems to have the most logical output based on the CSS.

Comment 3

[Mats Palmgren (inactive)]

My guess from the screenshots is that the device Firefox runs on
has a smaller width which causes the text in the last item to line
break and thus that item's height probably overflows its row.
If you change the text in the last item to "X" does it render
correctly in Firefox then? And conversely, if you make the text
in the last item longer so that it line breaks also in Chrome,
does Chrome show the same issue then?

Comment 4

[charbel]

Hello Mats, both screenshots were taken in my desktop PC on chrome and firefox with both its horizontal and vertical window sizes reduced so a vertical scrollbar would show.

The CSS for textresult is the following:

#textresult {
grid-area: textresult;
display: block;
background-color: rgb(164, 202, 245);
padding: 1rem;
border: solid 1px;
overflow-wrap: break-word;
}

The textresult cell row size is set to auto in the grid-row-template so it will grow to accomodate whatever text is in it.

Changing the text to X shows the same behavior.

The only way to make it sort of work is to add a margin-top and margin-bottom to the container grid (which is not what is needed and would only be a dirty workaround).

I'm not saying that Chrome is the reference browser, but it definitely works as it should and as one would expect it to. If you want to further test you can go to charbelnicolas.com/cipher and check the files.

Thanks for your time, I appreciate it!

Comment 5

[Mats Palmgren (inactive)]

It would help if you could reduce that page to a minimal testcase.
In particular, remove all uses of media queries and 'vh'/'vw' units
and set the size of the grid container to a definite size, like
600px * 800px or something like that. Also make sure all grid
items have the same number of lines in both browsers.

Comment 6

[Mats Palmgren (inactive)]

Attachment: Testcase

Actually, I think I understand the underlying issue now.

It seems that in Chrome the grid tracks by themselves causes
overflow (but only in the block-axis for some reason).

Comment 7

[Mats Palmgren (inactive)]

I think this is a bug in Chrome so I filed:
https://bugs.chromium.org/p/chromium/issues/detail?id=928885

Comment 8

[Mats Palmgren (inactive)]

@charbel FYI, if you want to workaround this difference
I think you could add an empty element in the last track
to get the same behavior in both browsers.

Comment 9

[charbel]

Here is a small code pen outlining the issue...

https://codepen.io/charbelnicolas/pen/omGBjN

Try it on chrome and then try on firefox, just make sure there is a scrollbar and the last div is fully hidden from view.

Setting the grid container to a definite size like you said would defeat the purpose of the CSS code.

Comment 10

[Mats Palmgren (inactive)]

Resolving as invalid since our layout is correct per the relevant
CSS specifications. Chrome has now fixed their bug so we agree
on the layout now.

The reporter filed a spec issue, https://github.com/w3c/csswg-drafts/issues/3638
so any further discussion should go there. Thanks.

Comment 11

[Javier Fernandez]

(In reply to Mats Palmgren (:mats) from comment #10)

Resolving as invalid since our layout is correct per the relevant
CSS specifications. Chrome has now fixed their bug so we agree
on the layout now.

The reporter filed a spec issue, https://github.com/w3c/csswg-drafts/issues/3638
so any further discussion should go there. Thanks.

It seems that the CSS WG resolved to change the spec, but edits are still pending. Would it make sense to reopen this issue now ? Another option would be to file a new bug once the spec is updated to reflect the new approved behavior.

Comment 12

[Mats Palmgren (inactive)]

I filed bug 1532383.