1257529 - precentage max-height is ignored for children of absolute positioned element

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Tobias Oelgarte]

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

Steps to reproduce:

For a test case see: https://jsfiddle.net/f5yz02yn/6/


Actual results:

The max-height for children (.scrollPane, blue) of the absolute positioned element (.container, orange) is ignored, even though it is respected for the absolute positioned element itself.


Expected results:

The child element should "inherit" the max-height from the parent and should display a scrollbar on its own.

Comment 1

[Tobias Oelgarte]

Ooops. I submitted the wrong test case. I meant: https://jsfiddle.net/f5yz02yn/7/

In this case a "display: flex" is added to the parent element to force the child element to have the same height as the parent (due to "align-items: stretch" as the default).

Chrome does this correctly, but Firefox displays it in the same way as in https://jsfiddle.net/f5yz02yn/6/ , which isn't right.

Comment 2

[Mats Palmgren (inactive)]

The reason is that .container has height:auto, so any %-values on the children
resolved against that is treated as 'auto'.  The spec is pretty clear about that:
https://drafts.csswg.org/css-sizing/#percentage-sizing
"percentages do not otherwise resolve against indefinite sizes,
and instead are treated as 'auto'."

Please file a bug on Chrome since they are not following the spec.

Comment 3

[Tobias Oelgarte]

(In reply to Mats Palmgren (:mats) from comment #2)
> https://drafts.csswg.org/css-sizing/#percentage-sizing
> "percentages do not otherwise resolve against indefinite sizes,
> and instead are treated as 'auto'."

This would be right, if it weren't for the "CSS Flexible Box Layout Module Level 1" spec which says:

"The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero."

"If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross-size properties. Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically."

https://www.w3.org/TR/css-flexbox-1/#algo-cross-line