我正在尝试构建一个可调整大小的sidenav。我有三个部分，并使用flexbox和百分比宽度来定义初始大小。我无法让调整大小功能工作。
Codepen
在JavaScript代码中，我将sidenav的宽度重置为像素数量。这会覆盖百分比宽度吗？设置初始宽度但能够调整大小的最佳方法是什么？

var resizer = document.querySelector(".resizer"),
        sidebar = document.querySelector(".sidebar");

      function initResizerFn(resizer, sidebar) {
        // track current mouse position in x var
        var x, w;

        function rs_mousedownHandler(e) {
          x = e.clientX;

          var sbWidth = window.getComputedStyle(sidebar).width;
          w = parseInt(sbWidth, 10);

          document.addEventListener("mousemove", rs_mousemoveHandler);
          document.addEventListener("mouseup", rs_mouseupHandler);
        }

        function rs_mousemoveHandler(e) {
          var dx = e.clientX - x;

          var cw = w + dx; // complete width

          if (cw < 700) {
            sidebar.style.width = `${cw}px`;
          }
        }

        function rs_mouseupHandler() {
          // remove event mousemove && mouseup
          document.removeEventListener("mouseup", rs_mouseupHandler);
          document.removeEventListener("mousemove", rs_mousemoveHandler);
        }

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

      initResizerFn(resizer, sidebar);

个字符