CSS动态调整大小的div重叠

Question

Having some problems with a div on a webpage. In chrome when the browser page is re-sized the div overlaps others and par of it is hidden. In IE the height:auto works as I would expect it and nothing gets overlapped. Currently I have tried;

height: auto *causes div to overlap below

height: 510px *does not seem to re-size the div

<div class=parent>
 <div class=child1>
overlapping
 </div>
 <div class=child2>
being overlapped
 </div>
</div>

The problem is a little more complicated than this simple scenario I am outlining. This is actually the MicroStrategy BI application which has a ton of js and a ton of css affecting the page. So I am attempting to alter these pages. Attached is a jsfiddle of the closes I could get to reproducing the issue. Unfortunately I was unable to simplify the issue too far down or I wouldn't reproduce it.

But as you can see the div with ID of List is the one which is overlapping the below div. This behavior does not happen in IE but only in chrome and firefox.

http://jsfiddle.net/MF6fR/1/

Long story short, I need the div with ID of list to not overlapp the below div

Answer 1

Perhaps it's a overflow-problem? Try overflow: hidden; instead of overflow: auto; in your .mstrSmallIconView