We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

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

haheute
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)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
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?

haheute
haheute Question owner
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 ..