jQuery resizable() does not drag the panel-footer

Question

When I apply the resizable on the panel and drag it down, the footer does not come with the panel.

Some way to solve this problem?

The code is as follows::

    <div class="panel panel-default" id="resizable">
  <div class="panel-body">A Basic Panel</div>
  <div class="panel-footer">Panel Footer</div>
</div>

<script>
    $( "#resizable" ).resizable({
  handles: "s"
});
</script>

Example: jsfiddle

Answer 1

What I did was add to your class panel one min-height, so that there would be a decrease that would cause the objects to collide, and a overflow: hidden so that what was inside the panels did not overflow.

.panel{
  min-height: 100px;
  overflow: hidden;
}

Already in the footer what made the difference was position: absolute and the bottom: 0, this way it will be fixed, regardless of the size of the .panel.

.panel-footer{
  position: absolute;
  bottom: 0;
  width: 100%;
}

Obs.: I used the same handles: "s" of the question, so the user can only resize vertically and at the bottom. If you don’t want this, you want a full resize, simply remove the handles and add a min-height/width and a max-height/width at the .panel according to what you want, so that, as @Highlander said, the user does not play around with the layout.

Jsfiddle