Setting bottom affecting scrollTop

Question

So, there's this problem. I have a <div> that is absolutely positioned, and inside of it, I have 2 more <div>s, also absolutely positioned. One has overflow, so it can scroll. The other is a box that pops up below it and shows information about an item selected in the scrolling <div>. It sorta looks like this:

+---------------+      +---------------+
|  list item A  |      |  list item A  |
+---------------+      +---------------+
|  list item B  |      |  list item B  |
+---------------+      +---------------+
|       .       |   => |      .        |
|       .       |      |      .        |
|       .       |      +---------------+
+---------------+      |   Bottom div  |
|  list item X  |      |               |
+---------------+      +---------------+

When the bottom <div> is expanded, it will push up the selected item if it will 'hit' it in the scrolling <div>, so the item you are querying for information about is still in view.

The problem is this:

When the top <div> is scrolled to the bottom, and the selected item needs to be pushed up, it will scroll correctly only until I set the bottom attribute of the top <div> so it sizes correctly when you resize the window. The basic idea is:

• set height of top div while animating
• set height: auto and bottom: height of bottom div

Any ideas on why this is happening? I thought that bottom and scrollTop were not correlated.