css resize: How to resize a dynamic growing div after max height is active - resize

Question

I want to dynamically add items to the list. the list's height should be as high as the items are. but at a certain point, it's 300px, the ul should stop "growing" … i did this with "max-height". so far so good. NOW that i have a scrollbar I want to add a resize functionality, so that the user can decide if it's bigger than max-height or not.
The problem is that it can't resize higher than max-height. Does anybody know how to do this? the best way?
html:
click to add
<ul>
<li>start</li>
</ul>
css:
ul {
background: #f2f2f2;
overflow: auto;
height: auto;
max-height: 300px;
resize: vertical;
}
js/jquery:
$('a').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
});
here is the same on fiddle to see it in action: http://jsfiddle.net/ZwrzX/
thx in advance!

Answer 1

Working fiddle: http://jsfiddle.net/ZwrzX/4/
When the UL height reaches 290px, a link appears besides the add item link and the user can click on it to add 25px to the max-height of the UL, if the user clicks it 2 times, 50px (2 x 25px) is added to the max-height of the UL.
HTML
click to add item
Add 25px to UL Max height
<ul>
<li>start</li>
</ul>
JavaScript
$('#addItem').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
if ($('ul').height() > 290) {
$('#addHeight').css('visibility', 'visible');
}
});
$('#addHeight').on('click', function() {
var currenULtHeight = $('ul').height();
$('ul').css('max-height', currenULtHeight + 25 + 'px')
});
CSS
ul {
background: #f2f2f2;
overflow: auto;
height: auto;
max-height: 300px;
resize: vertical;
}
#addHeight {
visibility: hidden;
}

Answer 2

ok. i tried again on my own and came to the following:
var max_h = $('ul').css('max-height').replace('px', '');
function check_height() {
var sum = 0;
$('li').each(function () {
sum += $(this).height();
});
if (sum >= max_h) $('ul').css({ 'height': max_h, 'max-height': sum });
else $('ul').css({ 'height': 'auto', 'max-height': max_h });
}
$('#addItem').on('click', function (e) {
e.preventDefault();
$('ul').append('<li>item</li>');
check_height();
});
$('#removeItem').on('click', function (e) {
e.preventDefault();
$('li').last().remove();
check_height();
});
fiddle: http://jsfiddle.net/ZwrzX/6/
I was asking if there is a cleaner solution. or a solution with less js?
any further ideas?