Make a div inside a td resizable - html

Question

I have a div inside a td element. The div is resizable and it has overflow scroll. The problem is that the div resizes when I use JQuery to change the contents of the div. What I want is for the div to stay the same size when its contents change. Can someone tell me how to do this?
<table>
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both; min-height:300px;min-width: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
<script>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
</script>

Answer 1

You need to set width to either Parent Element i.e., table or child element which you don't want to increase width. i.e, div.
I added width to parent element so that all child elements can control with that.
CODE:
#table{
width:165px;
}
<table id="table">
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both;min-height: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
JSFIDDLE
NOTE: change width according to your requirement.

Answer 2

You need add the width to the div
<div id="mydiv" style="border: 1px solid black; overflow:scroll;
resize: both; width:300px min-height:300px;"></div>

Answer 3

Perhaps it is because you have 2 min-heights. You need a max-height