Resizing iFrame with jQuery UI

Question

I have this code and it works fine:

Head

    <script>
 $(document).ready(function()
 {
  $("#test").resizable({minHeight: 50, minWidth: 50});
 });
</script>

Body

<div id="test" style="border: .1em solid black;">
</div>

However when I change my "div" into "iframe" I can't resize it anymore.

Body

<iframe id="test" style="border: .1em solid black;">
</iframe>

Answer 1

Put the iframe inside the div and give the iframe a height & width of 100%.

Demo here