How to make <div> resizeable?

Solution 1:

The best method would be to use CSS3. It supported by at least Webkit and Gecko.

According to the w3c spec:

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.

Solution 2:

div {
  border: 1px solid black;
}

.resizable-content {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

<div class="resizable-content">Resize Me!</div>

Solution 3:

The problem with the CSS3-only method is that only the bottom-right hand corner of the div becomes draggable. After going down the rabbit hole of trying to do this via copying code-snippets from Stack Overflow, I would highly recommend just using the excellent InteractJS JavaScript library in your project. It allows to you easily create a resizable (and draggable) div that can be resized from all sides.