这里有一个起点。我基本上在右上角创建了一个自定义调整大小的图标。然后我使用'mousedown'，'mousemove'和'mouseup'事件来跟踪调整大小的活动。你也许可以使用'拖动'和相关事件来做类似的事情。
注意'mousedown'在resize图标上，而'mousemove'和'mouseup'在文档正文（或可调整大小的div后面的其他较大元素）上。
为了简单起见，我在JavaScript中硬编码了宽度和高度。这意味着这些值存在于两个不同的地方，这是不好的。你可能应该只把它们放在JavaScript或CSS中，而不是像我这样同时放在两者中。
我需要将可调整大小的div放入填充body的容器中。否则，不会注册可调整大小的div之外的“mousemove”事件。如果在绝对定位的可调整大小的元素“后面”已经有其他内容，这可能不是问题。
供您参考：我最初也尝试使用原生的调整大小功能。我使用transform: rotate(-90deg)将调整大小的角移到右上角，然后使用transform: rotate(90deg)放入内部div，使内部内容再次向右向上。然而，虽然这把调整大小的角落在正确的地方，调整大小本身是完全混乱的，因为鼠标的移动和实际调整大小本身是关闭了90度。这有点难以用语言来描述，但可以说，如果没有一些重大的重新工作（或者一些出色的代码或隐藏的函数），我就无法使该策略工作。

var
  doc = document,
  ht = 400,
  wd = 400,
  main = document.querySelector("#resizable"),
  x, y, dx, dy;

var startResize = function(evt) {
  x = evt.screenX;
  y = evt.screenY;
};

var resize = function(evt) {
  dx = evt.screenX - x;
  dy = evt.screenY - y;
  x = evt.screenX;
  y = evt.screenY;
  wd += dx;
  ht -= dy;
  main.style.width = wd + "px";
  main.style.height = ht + "px";
};

rsz.addEventListener("mousedown", function(evt) {
  startResize(evt);
  doc.body.addEventListener("mousemove", resize);
  doc.body.addEventListener("mouseup", function() {
    doc.body.removeEventListener("mousemove", resize);
  });
});

#container {
  position: absolute;
  border: solid red 1px;
  margin: 0;
  height: 100%;
  width: 100%;
}
#resizable {
  display: block;
  font-size: 9pt;
  position: absolute;
  bottom: 50px;
  left: 20px;
  padding: 10px;
  min-height: 0;
  min-width: 0;
  border: solid 1px black;
  width: 400px;
  height: 400px;
  overflow-x: auto;
  overflow-y: hidden;
}
#rsz {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.5);
}
#original {}

<div id="container">
  <div id="resizable">
    <div id="rsz"></div>
    (some content)
  </div>
</div>

如果您在Stack Overflow中运行此代码段，则需要在单击“Run code snippet”后单击“Full page”来展开运行视图区域。

另一个肮脏的黑客：将容器的direction设置为rtl，角将位于左侧

.resizable {
    resize: both;
    overflow: auto;
    direction: rtl
}

请记住，您需要将内部div中的direction设置回ltr，因此文本将按预期显示：

.content {
    direction: ltr
}

这里有一个hack给你：

.outer-ne-resize {
  resize: both;
  overflow: auto;
}

.inner-ne-resize,
.outer-ne-resize {
  transform: rotateX(180deg);
  height: 100%;
  width: 100%;
}

.content {
  height: 100%;
  background-color: lightgray;
}

<div class="outer-ne-resize">
  <div class="inner-ne-resize">
    <div class="content">
      <p>Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
      Lorem ipsum content Lorem ipsum content Lorem ipsum content.
      </p>
    </div>
  </div>

这个黑客的问题是，它仍然在相同的nwse方向调整大小，如光标所示。这意味着，当你从顶部向下拉时，它不会收缩，而是从底部膨胀。

从Andrew Willems到JS类的重构解决方案也可以保持全局范围的干净，并能够将其应用于多个div
如果您在Stack Overflow中运行此代码段，则需要在单击“Run code snippet”后单击“Full page”来展开运行视图区域。

class Resizehandler {
    constructor(targetDivID, pullTabID) {
        var d = document;
        var pullTab = d.getElementById(pullTabID);
        this.target = d.querySelector(targetDivID);

        this.ht = 400; this.wd = 400;
        this.x = 0; this.y = 0;
        this.dx = 0; this.dy = 0;

        var resizeFn = this.resize.bind(this);
        pullTab.addEventListener("mousedown", (evt) => {
            this.x = evt.screenX;
            this.y = evt.screenY;
            d.body.addEventListener("mousemove", resizeFn);
            d.body.addEventListener("mouseup", () => {
                d.body.removeEventListener("mousemove", resizeFn);
            });
        });
    }

    resize(evt) {
        this.dx = evt.screenX - this.x;
        this.dy = evt.screenY - this.y;
        this.x = evt.screenX;
        this.y = evt.screenY;
        this.wd += this.dx;
        this.ht -= this.dy;
        this.target.style.width = this.wd + "px";
        this.target.style.height = this.ht + "px";
    };
}
new Resizehandler("#resizable", "rsz");

#container {
  position: absolute;
  border: solid red 1px;
  margin: 0;
  height: 100%;
  width: 100%;
}
#resizable {
  display: block;
  font-size: 9pt;
  position: absolute;
  bottom: 50px;
  left: 20px;
  padding: 10px;
  min-height: 0;
  min-width: 0;
  border: solid 1px black;
  width: 400px;
  height: 400px;
  overflow-x: auto;
  overflow-y: hidden;
}
#rsz {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.5);
}
#original {}

<div id="container">
  <div id="resizable">
    <div id="rsz"></div>
    (some content)
  </div>
</div>

几年后，我仍然在寻找一种方法来做到这一点。
现在我找到了一种调整右下角元素大小的方法，使用左上角的调整锚。
在chrome中，它看起来像预期的那样工作，但是它依赖于远没有在任何标准中定义的行为，所以最好不要在任何生产环境中依赖它，除非你可以控制哪些客户端/浏览器使用这段代码。
完整的示例和解释在这里找到：https://jsfiddle.net/ElMoonLite/zvok7p1f/
核心代码：

<div class="bottomright-with-nw-resize-outer">
    <div class="bottomright-with-nw-resize-inner">
        Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
        Lorem ipsum content Lorem ipsum content Lorem ipsum content.
    </div>
</div>

.bottomright-with-nw-resize-outer {
    transform: rotateZ(180deg);
    resize: both;
    overflow: auto;
    padding: 0 8px 8px 0;
    position: fixed;
    bottom: 10px;
    right: 10px;
    height: 100px;
    width: 100px;
}

.bottomright-with-nw-resize-inner {
    transform: rotateZ(180deg);
    width: 100%;
    height: 100%;
    overflow: auto;
}

这是一个内联版本，就像我希望一个正确的拖曳锚。注意，它有两个手柄，一个在右上方，我想要的，一个额外的底部为垂直轴。
关于垂直滚动的注解
.vertical-scroll { //也可以用作多个x-flip和x-flipback元素的换行
min-height：20px;//这可以防止与否定重叠
调整大小：垂直;
overflow：auto;//如果没有设置height属性，则在用户输入之前未定义
}
作为代码片段的替代，我在元素的外部使用了垂直滚动类。也许如果有一个以上的子翻转和翻转回来的元素，将看起来更好的一个垂直滚动点对齐在底部。
甚至去掉垂直滚动类。

.resize-x-handle-flip {
transform: rotateX(180deg);
resize: horizontal;
overflow: auto;
width: 200px;
background:lightcyan;
}
.x-text-flip-back {
transform: rotateX(180deg);
}
.vertical-scroll { 
min-height:20px;  
resize:vertical;
overflow:auto;
}

<div class="resize-x-handle-flip">
 <div class="x-text-flip-back">
  <div class="vertical-scroll">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.<br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </div>
 </div>
</div>

下面的解决方案使用了“移动对象”技术，但保留了右下角。左上角的一个标准html箭头接受向下的光标，你现在可以“拖动”框，而左下角保持不变，有效地调整框的大小，但从左上角。这段代码可以独立运行：

<html>
<head>
<script>
document.onmousedown=myMouseDown;
document.onmouseup=myMouseUp;
var can_drag=false;
var moving;

function obj_move(e) {
    if (can_drag) {
         moving.style.left =(e.clientX)+'px';
         moving.style.top =(e.clientY)+'px';
        return true;
    }
}
function myMouseUp(e) {
    can_drag=false;
}
function myMouseDown(e) {
    var selected_item=event.srcElement;
    if(selected_item.className=="drag")  {
        moving=document.getElementById('test');
        can_drag=true;
        document.onmousemove=obj_move;
    }
    return true;
}
</script>
</head>
<body>
<div style='position:absolute;top:50px; left:200px;right:600px;bottom:300px; border:1px solid black;overflow:scroll' id='test'>

<span class='drag' style='cursor:pointer'>&#8689;</span>

<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel velit blandit, convallis est vel, feugiat 
lorem. Suspendisse aliquam turpis eu posuere fermentum. Proin ullamcorper, purus vitae pulvinar congue, 
odio augue cursus diam, et semper mauris eros et odio. Nam vestibulum est scelerisque, accumsan ligula sed, 
pulvinar justo. Duis scelerisque ligula eget facilisis molestie. Suspendisse et consequat nunc, at ultrices risus.
 Duis varius nisl in nibh convallis fermentum. Mauris posuere neque placerat posuere ultrices. 
 Suspendisse eget massa ligula. Vestibulum quis elit justo. Maecenas sed augue fringilla, luctus leo eget, 
 tincidunt dui. Aliquam ligula enim, condimentum vitae vestibulum vitae, rutrum sed turpis. Vivamus vitae nibh erat. 
 Duis laoreet quis turpis eu eleifend. Suspendisse nec ultrices augue, vel suscipit sem.
<br>
</div>