1352314 - [CSS-Grid] Incorrect height of grid-item when it contains styled input fields

Status: RESOLVED DUPLICATE of bug 1356820

(Core :: Layout: Block and Inline, defect)

Description

[philippe (part-time)]

Attachment: txp-content-write-fxbuggy.html

IOW the content of the grid-item overflows the row height - or - the grid container doesn’t grow enough to accommodate the height of the column.

The main trigger for this appears to be input { font-size: 1rem; }; a secondary trigger is having a block of “text” that wraps to multiple lines

In the test case (extracted from a much larger layout): the grid-container has a red border; the green-blue column on the right appears too tall for the container.

I am aware that if your window is wide enough, the bug is not visible; similarly, if you remove the text ‘Leave blank to have the article's permalink URL automatically generated from the Title.’, the bug is not visible. However, in the real world layout, the column contains many more items (input fields), the issue is _always_ visible (real world layout is the back-end of a CMS).

Seen on Win 10 and macOS 10.11, Firefox 52 and Firefox for developers.

Comment 1

[philippe (part-time)]

Attachment: more minimal test case

Observe the difference between the two blocks. In the second one, there are 2 paragraphs that wrap to (multiple) lines - the column overflows the grid. Using the developer tools, toggle the font-size set on the input field, magic the layout displays correctly.

Comment 2

[philippe (part-time)]

Attachment: screenshot, test case 2

Comment 3

[Mats Palmgren (inactive)]

Thanks for your bug report!  I'm fixing this in bug 1356820...