1614888 - Vertical padding in flex container doesn't shrink when window is resized

Status: NEW

(Core :: Layout: Flexbox, defect, P3)

Description

[Fredrik Ekelund]

Attachment: flexbug.html

User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

1. Open the attached test case
2. Observe that the height of the .grid-items is determined by the :before pseudo element with a 100% padding-top
3. Resize the viewport to a smaller width

Actual results:

The .grid-items maintain their original height.

Expected results:

They should've shrunken proportionally in width and height. Opening the same use case in Chrome gives the desired result.

It's also worth mentioning that Firefox can scale up the elements correctly, but it seems to remember their original height, so any time the width of the viewport shrinks below its original width, the height of the .grid-item stops changing.

Comment 1

[Pablo]

Tested on Windows 10 64bit , Ubuntu 18.04 and MacOs 10.14
Issue reproducible on all 3 Operating systems and in all firefox versions.
FF Beta 74.0b6
FF Release 73.0.1
FF Nightly 75.0a1

Comment 2

[Ting-Yu Lin [:TYLin] (PST, UTC-7)]

Attachment: 1614888.html (reduced from reporter's test case)

When running under debug build, there are warning like

[Child 8448, Main Thread] WARNING: Child should at least request space for border/padding: 'aItem.Frame()->Type() == LayoutFrameType::None', file /home/aethanyc/Projects/gecko/layout/generic/nsFlexContainerFrame.cpp, line 4117