css - How can I make an iframe resizable?

Question

We have this group project and I was assigned to make a certain iframe resizable. I've been reading lots of forum posts since last week, and I found out that iframe itself can't be resizable.

Is there a way to make my iframe resizable?

Answer 1

This can be done in pure CSS, like so:

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Set the height and width to the minimum size you want, it only seems to grow, not shrink.

Live example: https://jsfiddle.net/xpeLja5t/

This technique has good support in all major browsers except IE.