Set max height and max width for a div in both IE and Firefox

Question

I am using a resizable div element [found in stackoverflow]. I need to set max height and max width for the div element. max-height and max-width works fine in Firefox but IE completely ignores it.

I am using IE version 9 and Firefox 23.

$(document).ready(function() {
    $(".divID")
      .wrap('<div/>')
        .css({'overflow':'hidden'})
          .parent()
            .css({'display':'inline-block',
                  'overflow':'hidden',
                  'height':function(){return $('.divID',this).height();},
                  'width':  function(){return $('.divID',this).width();},
                  'paddingBottom':'12px',
                  'paddingRight':'12px'

                 }).resizable()
                    .find('.divID')
                      .css({'overflow':'auto',
                            width:'100%',
                            height:'100%'
                            });
  });

Answer 1

I had a similar issue with a front-end system for viewing and editing mysql database tables, where data was being pulled into a table using php/html.

On Internet Explorer, any version under 11 would display any div (configured in a separate css file) outside of any useful area of the users browser view. Firefox and Chrome had no issues.

Answer 2

I just ran into this problem when setting max-height to "initial". Works fine in Chrome, but in IE (11) running in Edge mode, it does not work.

What does work is to use "inherit" instead of "initial".