Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why can't firefox deal with percent max-height of percent max-height?

  • 2 replies
  • 5 have this problem
  • 6 views
  • Last reply by haheute

more options

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 )

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 )

All Replies (2)

more options

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?

more options

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 ..