I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot.
The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/
In the initial state, the div#container will contain div#list-dynamic-2, which I want to take up the full height of div#container. The dynamically inserted div#list-dynamic-1 should be able to expand up to 150px. Once the height of div#list-dynamic-1 reaches 150px, I would like div#list-dynamic-2 to utilize the remaining space within that 150px.
I would appreciate any advice on whether achieving this with CSS alone is feasible or if JavaScript should be used instead.
(By the way, this is just a simple example to illustrate the dilemma; in practice, the goal would be to move selected users into the upper div and allow it to occupy half of div#container. Picture the upper div as a kind of shopping cart for users.)