创建可调节大小的视图

<div class="container">
  <div class="container__left">Left</div>
  <div class="resizer" data-direction="horizontal"></div>
  <div class="container__right">
    <div class="container__top">Top</div>
    <div class="resizer" data-direction="vertical"></div>
    <div class="container__bottom">Bottom</div>
  </div>
</div>

document.addEventListener("DOMContentLoaded", function () {
  const resizable = function (resizer) {
    const direction = resizer.getAttribute("data-direction") || "horizontal";
    const prevSibling = resizer.previousElementSibling;
    const nextSibling = resizer.nextElementSibling;

    let x = 0;
    let y = 0;
    let prevSiblingHeight = 0;
    let prevSiblingWidth = 0;

    const mouseDownHandler = function (e) {
      x = e.clientX;
      y = e.clientY;
      const rect = prevSibling.getBoundingClientRect();
      prevSiblingHeight = rect.height;
      prevSiblingWidth = rect.width;

      document.addEventListener("mousemove", mouseMoveHandler);
      document.addEventListener("mouseup", mouseUpHandler);
    };

    const mouseMoveHandler = function (e) {
      const dx = e.clientX - x;
      const dy = e.clientY - y;

      switch (direction) {
        case "vertical":
          const h =
            ((prevSiblingHeight + dy) * 100) /
            resizer.parentNode.getBoundingClientRect().height;
          prevSibling.style.height = `${h}%`;
          break;
        case "horizontal":
        default:
          const w =
            ((prevSiblingWidth + dx) * 100) /
            resizer.parentNode.getBoundingClientRect().width;
          prevSibling.style.width = `${w}%`;
          break;
      }

      const cursor = direction === "horizontal" ? "col-resize" : "row-resize";
      resizer.style.cursor = cursor;
      document.body.style.cursor = cursor;

      prevSibling.style.userSelect = "none";
      prevSibling.style.pointerEvents = "none";

      nextSibling.style.userSelect = "none";
      nextSibling.style.pointerEvents = "none";
    };

    const mouseUpHandler = function () {
      resizer.style.removeProperty("cursor");
      document.body.style.removeProperty("cursor");

      prevSibling.style.removeProperty("user-select");
      prevSibling.style.removeProperty("pointer-events");

      nextSibling.style.removeProperty("user-select");
      nextSibling.style.removeProperty("pointer-events");

      // Remove the handlers of `mousemove` and `mouseup`
      document.removeEventListener("mousemove", mouseMoveHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
    };

    resizer.addEventListener("mousedown", mouseDownHandler);
  };

  document.querySelectorAll(".resizer").forEach(function (ele) {
    resizable(ele);
  });
});

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;

  /* Misc */
  border: 1px solid #cbd5e0;
  height: calc(100vh - 2px);
/*   width: 100%; */
}
.resizer[data-direction="horizontal"] {
  background-color: #cbd5e0;
  cursor: ew-resize;
  height: 100%;
  width: 2px;
}
.resizer[data-direction="vertical"] {
  background-color: #cbd5e0;
  cursor: ns-resize;
  height: 2px;
  width: 100%;
}
.container__left {
  /* Initially, the left takes 1/4 width */
  width: 25%;

  /* Misc */
  align-items: center;
  display: flex;
  justify-content: center;
}
.container__right {
  /* Take the remaining width */
  flex: 1;

  /* Misc */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container__top {
  /* Initial height */
  height: 12rem;

  /* Misc */
  align-items: center;
  display: flex;
  justify-content: center;
}
.container__bottom {
  /* Take the remaining height */
  flex: 1;

  /* Misc */
  align-items: center;
  display: flex;
  justify-content: center;
}