最稳方案是用 CSS Grid 配合 resize-observer-polyfill 动态更新 grid-template-columns，监听 mousedown/mousemove/touchstart/touchmove，限制比例、重置 scrollTop、持久化 localStorage，避免 Flexbox 表格布局及 gap 与 padding 混用。
用 CSS Grid + resize 插件最稳
原生 CSS 无法让用户拖拽调整双栏宽度，resize 属性只对 textarea 有效，对 div 或网格列无效。必须靠 JS 控制列宽并持久化状态。
推荐直接用 resize-observer-polyfill 配合 grid-template-columns 动态更新，比手写 mousemove 更可靠：
- 监听分隔线的
mousedown，绑定document.onmousemove计算鼠标相对位置 - 用
Math.max(20%, Math.min(80%, ratio))限制左右栏最小/最大比例，避免拖到消失 - 更新时直接改
element.style.gridTemplateColumns，例如"25% 75%" - 松手后调用
localStorage.setItem("sidebarWidth", "25%")记住上次宽度，刷新不重置
Flexbox 下拖拽调整要手动重置滚动位置
如果用 display: flex 实现双栏，拖拽后常出现右侧内容“错位”或“顶部空白”，本质是 textarea 或 pre 的 scrollTop 没同步重置。
实操关键点：
- 拖拽结束时，必须显式设置
leftPanel.scrollTop = 0和rightPanel.scrollTop = 0，否则滚动锚点残留 - 移动端需同时监听
touchstart/touchmove，且在touchmove中调用event.preventDefault()阻止默认滚动 - 不要用
flex-basis做动态宽度——它会受flex-shrink干扰；改用width+flex: none
别碰 display: table 的动态调整
display: table 的列宽由内容撑开，width 在 IE 下必须写像素值才生效，% 宽度完全不可控。强行 JS 改 style.width 会导致整行重排，右侧内容跳动明显。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见翻车现场：
- 拖拽后右侧
table-cell高度塌陷——因为没同步设min-height - 松手瞬间两栏错位——
table-row不支持transition，CSS 动画无效 - 小屏下仍强行横排——
@media无法覆盖display: table的固有流式行为，只能 JS 切类名
gap 和 padding 混用容易导致视觉错位
很多人想用 gap: 2rem 控制双栏间距，再额外加 padding 做内边距，结果实际间距变成 gap + padding * 2，左右不对称。
正确做法是统一用一种方式控制留白：
- 若需响应式间距（比如大屏 2rem、小屏 1rem），只用
gap，配合媒体查询改值 - 若需背景色延展到视口边缘（如灰色侧边栏铺满全宽），改用
padding-left包裹整个容器，双栏内部用gap: 0 - 绝对不要在
grid容器上同时设gap和padding，除非你明确知道它们叠加后的渲染顺序
拖拽调整看似只是改个宽度，但涉及滚动锚点、设备适配、状态持久化三个隐性层，最容易被忽略的是移动端 touch 事件链和 localStorage 同步时机——松手那一刻没存，下次打开就回到默认值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
