最简实现左右分栏拖拽需用 resize: horizontal + overflow: hidden + display: flex，左栏设 min-width、flex-shrink: 0，右栏 flex: 1；需 ResizeObserver 监听左栏尺寸变化，用 contentRect.width 获取准确宽度。
用 resize CSS 属性最简实现左右分栏拖拽
现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）原生支持通过 resize + overflow 实现可拖拽调整大小的元素，无需 JS。但仅适用于块级元素且必须设 overflow: hidden | auto | scroll，对左右分栏场景需配合 display: flex 和固定最小宽度。
常见错误是直接给 <div> 加 resize: horizontal 却没设 overflow，结果完全无反应；或在 Flex 容器中忘了限制子项不收缩（flex-shrink: 0）。
-
<div class="left">需设min-width: 200px、flex-shrink: 0、resize: horizontal、overflow: hidden -
<div class="right">设flex: 1，自动填充剩余空间 - 父容器必须是
display: flex，且不能设width: 100%（会干扰 resize 计算）
<style>
.container { display: flex; height: 100vh; }
.left {
min-width: 200px;
max-width: 80vw;
flex-shrink: 0;
resize: horizontal;
overflow: hidden;
background: #f0f0f0;
}
.right { flex: 1; background: #e0e0e0; }
</style>
<p><div class="container">
<div class="left">左栏（可拖拽）</div>
<div class="right">右栏（自适应）</div>
</div>用 ResizeObserver 监听拖拽后尺寸变化
resize CSS 属性不会触发 DOM 尺寸事件，JS 无法感知拖拽结束。若需响应式更新内容（比如重绘图表、加载新数据），必须用 ResizeObserver 主动监听 .left 的宽高变化。
注意：不要在回调里直接修改被观察元素的样式（如再设 width），否则可能引发循环触发；也不要依赖 offsetWidth——它在 ResizeObserver 回调中可能未同步更新，应优先用 contentRect.width。
立即学习“前端免费学习笔记（深入）”；
- 只观察
.left元素，避免监听整个容器造成冗余 - 首次回调可能在渲染前触发，建议加
requestAnimationFrame延迟读取 - Safari 旧版（contentRect，需 fallback 到
getBoundingClientRect()
const leftEl = document.querySelector('.left');
const ro = new ResizeObserver(entries => {
requestAnimationFrame(() => {
const width = entries[0].contentRect.width;
console.log('左栏当前宽度：', width);
// 这里触发重绘、请求数据等逻辑
});
});
ro.observe(leftEl);兼容老浏览器：用 mousemove + getBoundingClientRect 手写拖拽条
IE、旧版 Safari 或需要精确控制拖拽行为（如吸附、最小步长、禁用纵向缩放）时，得自己实现。核心是插入一个 <div class="resizer"> 作为拖拽手柄，监听 mousedown → mousemove → mouseup，动态计算并设置左右栏宽度。
容易踩的坑是未移除 mousemove/mouseup 监听器，导致拖拽结束后仍响应鼠标移动；或未用 event.preventDefault() 在 mousedown 中阻止默认选中行为，导致拖拽时文字被选中。
- resizer 必须设
position: absolute、z-index: 10，宽度固定（如4px） - 拖拽过程中用
document.documentElement.clientWidth而非window.innerWidth，避免滚动条宽度干扰 - 计算新宽度时，用
clientX - containerRect.left，而非直接减去 resizer 左偏移
为什么不用第三方库（如 splitpanes 或 vue-splitpane）？
纯 HTML/CSS/JS 场景下引入这类库，往往只为一个拖拽功能就增加 10KB+ 体积，且多数库默认绑定框架生命周期（Vue/React），在 index.html 原生环境里反而要手动 patch 初始化逻辑。真正需要的是轻量、无依赖、可预测的行为。
如果项目已用 Vue，splitpanes 确实省心；但若只是静态页面或嵌入已有系统，手写 50 行 JS + 20 行 CSS 更可控——特别是当你要禁止用户把左栏拖到 50px 以下，或者想在拖拽中实时显示宽度数值时，原生方案改起来更直接。
拖拽交互的边界处理（比如最小宽度、最大宽度、鼠标离开窗口时的收尾）永远是最容易被忽略的部分，别只测「正常拖」，一定要试「快速甩出窗口再松手」和「在边缘反复小幅度拖动」两种情况。
