可调整大小侧边栏：如何限制主区域的最大宽度

这个问题的核心是：你只给侧边栏设置了CSS的max-width和min-width，但JavaScript里没有同步这些限制——当拖拽超过最大宽度时，侧边栏被CSS限制住了，但主区域的margin-left还在跟着鼠标位置继续增加，自然就会被挤得越来越小。

这里有个简单直接的修复方案，就是在计算宽度时，手动把值限制在你设定的最小、最大值范围内，再同步设置给侧边栏和主区域：

步骤1：定义侧边栏的宽限范围 #

先把侧边栏的最小、最大宽度定义成变量，方便后续维护（数值可以根据你的实际需求调整）：

const MIN_WIDTH = 200; // 侧边栏最小宽度
const MAX_WIDTH = 400; // 侧边栏最大宽度

步骤2：修改Resize函数，加入宽度限制 #

在计算目标宽度时，用Math.max()和Math.min()把值锁在设定的范围内，再同步更新侧边栏和主区域的样式：

function Resize(e) {
  // 计算原始的目标宽度
  let targetWidth = e.clientX - element.offsetLeft;
  // 限制宽度在最小、最大值之间
  targetWidth = Math.max(MIN_WIDTH, Math.min(targetWidth, MAX_WIDTH));
  
  // 同时设置侧边栏宽度和主区域的margin-left
  element.style.width = targetWidth + 'px';
  document.getElementById("mainArea").style.marginLeft = targetWidth + 'px';
}

额外优化：从CSS动态读取宽限（可选） #

如果你的max-width和min-width是写在CSS里的，也可以通过JS动态获取，避免硬编码：

// 在initResize函数内或者页面加载时获取
const computedStyle = window.getComputedStyle(element);
const MIN_WIDTH = parseInt(computedStyle.minWidth);
const MAX_WIDTH = parseInt(computedStyle.maxWidth);

这样修改后，当你拖拽侧边栏到最大宽度400px时，即使继续往右拖，targetWidth也会被限制在400px，主区域的margin-left就不会再继续增大，彻底解决主区域被过度挤压的问题。

内容的提问来源于stack exchange，提问作者theFrontEndDev