JQuery UI resizable() изменяет ширину при изменении размера высоты

У меня проблема с изменением размера. Я использую JQuery .resizable()в div со следующим css:

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

Он также содержит много других div и прочего. Я присоединяю resizableследующим образом:

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

widgetResizeListener()пока просто записывает что-то в консоль.

Теперь, когда я пытаюсь изменить высоту элемента div, перетаскивая его сторону ui-resizable-s, он автоматически изменяет ширину элемента примерно на 30px. Это происходит каждый раз, когда я начинаю перетаскивать. И поэтому нужная ширина каждый раз теряется. То же самое происходит с высотой при изменении ширины.

Интересно, это из-за отступов, которые есть у моего div? Потому что раньше, когда не было паддинга, таких "дерганых" вещей не было бы. Теперь я не могу удалить прокладку, так как она действительно нужна. Итак, как можно решить эту проблему? Я имею в виду, есть ли способ включить дополнение в JQuery resizable()?

Будем признательны за любую помощь, спасибо...