W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Treating 'calculated' height as 'specified' height when computing max-height and min-height

From: Robert Hogan <robhogan@gmail.com>
Date: Thu, 13 Nov 2014 16:18:38 +0000
Message-ID: <CAD1xn+P437oO9KGe9U0cBpTYY-HwAT0m_f2NvKirA2wTDrK7mw@mail.gmail.com>
To: www-style list <www-style@w3.org>
At https://crbug.com/422919 we have an interoperability difference between
Blink and FF/IE we would like to sort out. In the following test case Blink
renders the images as 300px high, while FF/IE render it as 100px high.

<style>
#outer {
    height: 100px;
    outline: 1px solid;
    position:relative;
    }
#inner { top:0; bottom:0; position:absolute; }
img { max-height: 100%; }
</style>
<div id="outer">
    <div id="inner">
        <img src="http://placehold.it/300x300" />
    </div>	
</div>

Also available at: http://jsfiddle.net/yhd7bL1a/1/

In Blink we render it as 300px because
http://dev.w3.org/csswg/css2/visudet.html#min-max-heights
<http://www.w3.org/TR/CSS21/visudet.html#min-max-heights> says:

"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')."

In the test, 'inner' is the containing block and it doesn't have a height
specified explicitly, so Blink treats the max-height as none.

FF/IE seem to treat the top/bottom values of inner as making the height of
inner explicit enough to treat as though it had been specified - presumably
leaning on the part that talks about depending on content height.

What is the correct behaviour?

Thanks,
Robert
Received on Thursday, 13 November 2014 16:19:06 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:26 UTC