如何使 div 的整个边可调整大小？

Question

我目前知道调整大小手柄出现在带有 css 属性的 div 的右下角：

resizable: horizontal;

我不确定这是否是浏览器独有的，但在 Firefox 中，手柄仅出现在右下角，并且仅在我们拖动该特定部分时才起作用。如果您看到任何网络应用程序，您可能会发现这些应用程序通过使整个侧面（例如：右侧）可拖动来实现相同的效果，并且即使它不在手柄上也没关系。

总而言之，我想要实现的目标：

使用 vanilla html/css 使 div 的整个侧面可调整大小。

对于当前的情况，我无法使用 jQuery，因为这是一个 React 应用程序。想知道这是否可以仅通过 html/css 而不是依赖 javascript，如果不能，我们如何在普通 javascript 中实现这一点。

Answer 1

像这样的东西会起作用吗？
https://codepen.io/rod911/details/wvzPjEV

resize.addEventListener("mousedown", function (e) {
   drag = true;
   moveX = e.x;
});

container.addEventListener("mousemove", function (e) {
    moveX = e.x;
       if (drag)
           left.style.width = moveX;
});

需要使用js来捕获拖动事件。