How to properly resize a Bootstrap panel with jQuery UI?

Question

I'm currently struggling with resizing panels in Twitter Bootstrap with the jQuery UI resizable. Horizontal resize works fine (sometimes the resize bars get moved though), but vertical resize acts weird. Here's my fiddle: http://jsfiddle.net/9Nyze/

I've tried setting height to 100% in both the .panel and the .panel-body but that just causes the .panel-body to overflow the div.

Answer 1

To solve this, I ended up just tacking a resizable that was on the e side to the .panel and then tacking a resizable that was on the s side to the .panel-body and making the .panel-body have a height: 100%. It works well enough.