Why can't firefox deal with percent max-height of percent max-height?
I think this is possibly a bug.
Firefox is not able to use percent max-height of a percent max-height. Chromium does. But it is difficult to explain. Please have a look at this fiddle, with firefox and chromium, you will see the different behaviour by resizing the browser window: http://jsfiddle.net/qx75g/
I need this for my website but cannot use it, because it does not work with firefox :(
( archlinux with firefox 28.0 )
ప్రత్యుత్తరాలన్నీ (2)
Okay, so the page on MDN 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 none.
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
That seems to be copied more or less verbatim from CSS2 Level 1: http://www.w3.org/TR/CSS2/visudet.html#min-max-heights
Which makes me think that it isn't like to change in the near future...
Any reason not to set height:50% for .inner? How does leaving that unspecified benefit the layout?
Thanks for the quick response..
I have comments below the image, that cannot be in the same div as the image, because the page is responsive, and on mobile phone, another div with image information moves between image and comments. (floats left and right are removed)
So, I could set the image container to a fixed height, but then it happens, that very wide pictures leave lots of space between image and comments or very tall images get cut or flow over ..