Don't keep aspect ratio with jQuery resizable while holding shift

Question

I'm resizing a div with jQuery resizable and I only want to resize its height.

I managed to only resize while dragging bottom helper :

$('div').resizable({
   handles: 's',
});

But if I hold shift key, width is changing. See http://jsfiddle.net/6p20qjmr/3/

How can I disable this behavior?

Edit: The div container width may change after initial resizable call.

Answer 1

$(function() {
    var $elt = $(".resize");
    var width = $elt.width();
   $elt.resizable({
       handles: 's',
       maxWidth: width,
       minWidth: width
    });
});

This may not be the best solution, but I am not super familiar with JQuery UI's resizable functionality. I'm not even sure why holding shift changes the functionality. If you could explain that, I may be able to provide a better solution that seems less hacky.

Fiddle: http://jsfiddle.net/6p20qjmr/