Как сделать <div> изменяемым размером?

Лучшим способом было бы использовать CSS3. Он поддерживается как минимум Webkit и Gecko.

Согласно w3c spec:

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

Webkit и Firefox не интерпретируют спецификации одинаково. В Webkit размер ограничен установленными шириной и высотой. Есть еще вопрос: Как я могу использовать CSS, чтобы изменить размер элемента до размера, меньшего, чем исходный? по этому поводу.

если вам нужно выполнить некоторую функцию doOnResize (тег) для каждого тега (также <div>) из массива должен бытьтеги, вы можете просто скопировать этот массив в массив окно:

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

и после этого установите

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

где где-то в начале должно быть написано

const WIN_RESIZED = 'move_resized_divs'

с произвольным именем вроде 'move_resized_divs'

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

Проблема с методом, поддерживающим только CSS3, заключается в том, что перетаскиванием становится только правый нижний угол div. После того, как я погрузился в кроличью нору, пытаясь сделать это путем копирования фрагментов кода из Stack Overflow, я настоятельно рекомендую просто использовать отличный Библиотека InteractJS JavaScript в вашем проекте. Это позволяет вам легко создавать изменяемый размер (и перетаскиваемый) div, размер которого можно изменять со всех сторон.