1118142 - The height of one div with flex display and overflow-y is not correct, cross the boundary in firefox 34.0, while it is correct in 31.3

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[lei.wang.leiw]

Attachment: Display in FF34

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

I have a html which works well in FireFox 31.3, while it breaks in FireFox 34.0. I don't know it is flex problem in FF34, or overflow-y problem.

the html is 
http://stackoverflow.com/questions/27777290/the-height-of-one-div-with-flex-display-and-overflow-y-is-not-correct-cross-the




Actual results:

run this piece of code in FF31, the vertical scroll bar will be shown, everything is OK. But run this piece of code in FF34, the vertical scroll bar will not be shown, the content will be shown cross the boundary.



Expected results:

Same as FF31

Comment 1

[:Gijs (he/him)]

Daniel, can you take a look?

Comment 2

[Daniel Holbert [:dholbert]]

Similar to bug 1116813 -- nested flex containers, with tall content & "overflow" set several nesting-levels deep.

Due to a spec change, you now need "min-height:0" on any flex item whose min-content height is tall, unless *that flex item* has overflow: [non-visible] set.  (Having it set on a descendant doesn't count, unfortunately.)

So here, the "#main .body" rule in particular is the one that needs "min-height: 0".

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase (with fix applied via ":hover" rule)

For archival purposes, here's the testcase, taken from stackoverflow. I've added the fix, in a ":hover" rule, so you can hover the right area (e.g. over the text "UPPER") and see the fixed rendering.