1439703 - Display:flex breaks position:sticky with bottom:0

Status: RESOLVED DUPLICATE of bug 1377072

(Core :: Layout, defect)

Description

[Steve Fisher]

Attachment: sticky-bug.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36

Steps to reproduce:

1) Create a container with display: flex and flex-direction: column, and overflow: auto
2) Add some content so it becomes scrollable
3) Add a footer with position: sticky and bottom: 0
4) Scroll to the bottom

See pen and screenshot:
https://codepen.io/timeherosteve/pen/NyYJMe


Actual results:

The height of the footer is ignored and the footer overlaps the end of the content.


Expected results:

The footer should not overlap the content at the end.

This works properly in Chrome and Safari.

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report!  I think this is basically the same as bug 1377072 (particularly bug 1377072 comment 5).  Marking as a duplicate.