Last of DIVs that fits the container height - html

Question

I've two (or more) DIVs inside a list item and I'm not able to make the last one to fit the remaining height of its container.
This is the code:
CSS
div{margin: 5px;}
ul{
height: 300px;/*it's calculated via js*/
width: 250px;/*it's calculated via js*/
padding: 0;/*don't change it*/
margin: 0;/*don't change it*/
background-color: #F5EBD6;
border: 4px solid orange;
}
li{
list-style-type: none;
background-color: #E0E5F5;
border: 2px solid blue;
}
.item-title{
background-color: #EDF5E0;
border: 2px solid green;
}
.item-description{
background-color: #FDF1FB;
border: 2px solid fuchsia;
}
.item-description>div{
background-color:rgba(252,255,170,0.3);
}​
HTML
<ul>
<li>
<div class="item-title">Title</div>
<div class="item-description">
<div style="margin: 0px; padding: 0px; border: 0px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</li>
​
Here's the Fiddle.
I'd like that the .item-description div (fuchsia bordered div in the Fiddle) will stay inside listItem (the orange bordered element).
The div inside the description, the actual text container, should not be modified in its height.
Here's the Fiddle that shows how it should look like.
On the right the result I'd like to reach
I'd like to solve the problem using css/css3, not js and without changing the HTML, if possible.
Can you help me?

Answer 1

Change the UL css like below,
ul {
background-color: #F5EBD6;
border: 4px solid orange;
float: left;
margin: 0;
min-height: 300px;
padding: 0;
width: 250px;
}
it will works.

Answer 2

Adding
overflow-y:scroll;
to .item-description
might put all the content inside the div.AM not sure this is what you are expecting
http://jsfiddle.net/Pdaj8/2/