[css-grid] Row with track size "auto" doesn’t expand to wrap content

RESOLVED FIXED

Status

()

RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: sime.vidas, Assigned: mats)

Tracking

({testcase})

42 Branch
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed by bug 1174569])

Attachments

(2 attachments, 1 obsolete attachment)

26.27 KB, image/png
Details
5.47 KB, text/html
Details
(Reporter)

Description

3 years ago
Created attachment 8684594 [details]
Capture.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20151029151421

Steps to reproduce:

In Firefox Nightly, open this demo: https://jsbin.com/duveso/edit?css,output


Actual results:

The 2. row does not expand vertically to wrap the <main> element. (See attached screenshot.)


Expected results:

The 2. row should expand. Open in Chrome (with Web Platform flag) to see desired result.

Updated

3 years ago
Component: Untriaged → Layout
Product: Firefox → Core

Comment 1

3 years ago
Created attachment 8689228 [details]
A test case

Example of problem of sizing auto in width and height.
Flags: needinfo?(mats)

Comment 2

3 years ago
In Firefox this problem is a headache.

I wrote a simplified example: http://jsbin.com/ligiyuluma/edit?html,css,output

Comment 3

2 years ago
In a more general sense, it doesn't respect calculated values, as opposed to explicit values.

If you give a cell value a height, the entire row that it's a part of will be set to that height.  If you give it a min-height, the row will be set to that min height, but it won't expand beyond that if the cell grows further.

If a component of a cell (such as an image thumbnail) has width/height defined with a calc() function, the height of the cell will be based on the original image size, not the calc()'d size. This leads to cells that are sized far larger than their apparent content.

If you adjust percy's example code to have multiple rows, you can have multiple cells of one row expand so that they overlap the rows beneath while the row as a whole still remains the original height.  That is, all three cells in the first row can have enough text to *all* be larger than the row height, and the row height won't expand.

Basically, all of it implies that once initial values are set, the browser never percolates any further changes to the grid sizing system.
(Assignee)

Comment 4

2 years ago
Created attachment 8761678 [details]
testcase

(Updated the original test to account for the 'grid-template' shorthand
syntax having swapped rows/columns since this was filed.)
Assignee: nobody → mats
Attachment #8689228 - Attachment is obsolete: true
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(mats)
(Assignee)

Updated

2 years ago
Depends on: 1174569
Keywords: testcase
(Assignee)

Comment 5

2 years ago
This is now fixed in the latest Nightly.  Thanks for your report.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Whiteboard: [fixed by bug 1174569]
You need to log in before you can comment on or make changes to this bug.