Question

Can some one please explain why when I tell a div that:

• it’s height is 500px and it’s max height is also 500px,

• overflow if he needs (auto).

when put elements dynamically inside the div it’ll grow to the size it needs, regard my limits, and the entire page will scroll not the div.

why? how to fix?

Ok, sorry for the minimal details, I just got it, if using display: inline-table, it ignores all this stuff I wrote that don’t work…
thanks

Answer 1

The following seems to work just fine for me. See a demo here: http://jsbin.com/iqigen/5/edit

<style>
  #box {
    height: 500px;
    overflow: auto;
  }
</style>
<div id="box"></div>

When the collective height of the nested elements exceeds that of the parent, the parent will engage in overflowing. When the content overflows, a scrollbar will be shown on the parent element, obstructing any view of the child elements beyond the bounds of their container.

You can add several dynamic elements with the following:

var colors = [ '#F00', '#660', '#066' ];

setInterval( addElement, 1000 );

function addElement(){
  $("<p>", { text: new Date() })
    .css( 'background', colors[ Math.floor( Math.random() * colors.length ) ] )
    .appendTo( "#hello" );
}