1563485 - Padding bottom is not working inside a flex container, In chrome works well, but in firefox I have to add extra padding to achieve the same appearance

Status: RESOLVED DUPLICATE of bug 1697349

(Core :: Layout: Flexbox, defect)

Description

[u642405]

Attachment: Screenshot 2019-07-04 at 11.50.46.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

I have a container width general padding, like 40px, is a flex container, and inside I have a list, that is flex: 1.

Actual results:

In Chrome works as expected, but in Firefox I have to add an extra 40px padding-bottom to the list (flex child) to fix the space at the bottom

Expected results:

The ideal scenario will be not to add this extra padding only for Firefox because @-moz-document is disabled by default

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Hi :)

Can you attach a test-case to the bug so that we can investigate? Either that, or an URL that reproduces it.

Comment 2

[Daniel Holbert [:dholbert]]

If the outer flex container is a scrollable element, and you're wanting the padding to create scrollable area, then you might be hitting bug 748518 (where Firefox was following the spec, though some new spec text has been written [or will at some point be written], which is tracked in bugs noted in comments towards the end there, e.g. bug 1527949).

Comment 3

[u642405]

Sorry for the delay! I have a code sample to reproduce my bug, I hope it helps to you:
https://repl.it/@alberss/Firefox-padding-bug

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Yeah, this looks like bug 748518, and should be fixed by bug 1527949. See those bugs for the whole backstory.

Comment 5

[u642405]

Ok thanks!

Comment 6

[Emilio Cobos Álvarez (:emilio)]

No problem, thanks for reporting it :)