930749 - nested max-height yields incorrect layout

Status: RESOLVED DUPLICATE of bug 816679

(Core :: General, defect)

Description

[Piers Haken]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

http://jsfiddle.net/nz5rP/


Actual results:

the 2nd img overflows the div


Expected results:

see Chrome

Comment 1

[Boris Zbarsky [:bzbarsky]]

How is max-width relevant here?  You're talking about the vertical overflow, right?  I see the same behavior if I remove the max-width styles altogether.

What's going on here is that the parent has auto height, so a percentage max-height on the child is treated as 'none'.  The CSS spec at http://www.w3.org/TR/CSS21/visudet.html#min-max-heights has this to say:

  <percentage>
    Specifies a percentage for determining the used value. The percentage is calculated
    with respect to the height of the generated box's containing block. If the height of
    the containing block is not specified explicitly (i.e., it depends on content
    height), and this element is not absolutely positioned, the percentage value is
    treated as '0' (for 'min-height') or 'none' (for 'max-height'). 

which is exactly what we implement.