我有一个布局，其中侧边栏是可调整大小的。 我使用JavaScript实现了这一点。 但我希望它有一个最大值和最小值的调整大小。 我已经为侧边栏部分设置了max-width和min-width。 但问题是，即使侧边栏使用max-width进行了限制，主区域也会减少（当扩展时）。 我一直在根据光标指针移动（使用js）向主区域添加margin-left属性。 但没有任何属性允许我们设置最大或最小边距-左。 我怎么才能做到这一点。 有人能给出解决办法吗？

Js Fiddle-完整代码-https://jsfiddle.net/pdo4yjmg/

请尝试在fiddle结果中扩展到400px以上，您可以在那里看到问题(400px是最大宽度）

Js部分-

var element = document.getElementById('resizable');
  if (element) {
    var resizer = document.createElement('div');
    resizer.className = 'draghandle';
    resizer.style.width = '6px';
    resizer.style.height = '100vh';
    element.appendChild(resizer);
    resizer.addEventListener('mousedown', initResize, false);
  }

  function initResize(e) {
    window.addEventListener('mousemove', Resize, false);
    window.addEventListener('mouseup', stopResize, false);
    document.getElementById("mainArea").classList.add('marginLeft')
  }

  function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    document.getElementById("mainArea").style.marginLeft = (e.clientX - element.offsetLeft) + 'px';
  }

  function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
  }