如何使div可调整大小，从侧面调整大小？

div {
  resize: horizontal;
  overflow: auto;
}

<div id="myDiv"></div>
<script>
var div = document.getElementById('myDiv');
var startX = 0;
var startWidth = 0;

div.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(div).width, 10);
  document.addEventListener('mousemove', doDrag, false);
  document.addEventListener('mouseup', stopDrag, false);
}, false);

function doDrag(e) {
  div.style.width = startWidth + e.clientX - startX + 'px';
}

function stopDrag(e) {
  document.removeEventListener('mousemove', doDrag, false);
  document.removeEventListener('mouseup', stopDrag, false);
}
</script>