iframe 本身不支持原生 resize，需将其嵌入具备 resize 属性的块级父容器（如 .left-pane）并配合 flex 布局；关键在于控制容器尺寸而非 iframe 自身，同时用 pointer-events 或蒙层解决事件拦截问题。
iframe 本身不能直接拖拽调整大小，但可以嵌在可拖拽分栏结构中——关键不是操作 iframe，而是控制它所在的父容器尺寸。
为什么直接给 iframe 加 resize: horizontal 没用
浏览器只对特定元素（如 textarea）原生支持 resize，iframe 不在白名单里。即使强行加 resize: both + overflow: auto，也大概率无响应；更常见的是鼠标悬停无 ew-resize 光标、拖不动、或拖动后 iframe 内容不重绘。
常见错误包括：
- 把
resize直接写在<iframe></iframe>标签上，忽略其父容器必须是块级且有overflow值 - 没限制最小宽度/高度，导致拖到 0 后布局塌陷，
iframe被压成一条线 - 在 Flex/Grid 容器中忘了设
flex-shrink: 0或min-width，拖拽时子项被压缩而非拉伸
用 resize + flex 控制 iframe 所在栏位
真正生效的方案是：把 iframe 放进一个 div 容器，再让这个容器参与分栏布局。现代浏览器（Chrome 90+、Firefox 91+、Safari 15.4+）支持该组合。
核心 CSS 规则：
- 父容器设
display: flex，且不能设width: 100%（会干扰 resize 计算） - 含
iframe的左栏加：min-width: 200px、flex-shrink: 0、resize: horizontal、overflow: hidden - 右栏（或其他内容区）设
flex: 1，自动填充剩余空间 -
iframe自身设width: 100%、height: 100%，并确保其父容器有明确高度（比如height: 100vh）
示例片段：
.container { display: flex; height: 100vh; }
.left-pane { min-width: 250px; max-width: 70vw; flex-shrink: 0; resize: horizontal; overflow: hidden; }
.left-pane iframe { width: 100%; height: 100%; border: none; }
.right-pane { flex: 1; }
iframe 拖拽时鼠标事件被拦截怎么办
当 iframe 内容来自同源页面，它可能捕获 mousemove 事件，导致拖拽手柄失灵——表现为：鼠标移到分隔条上光标正常，但按下后无法拖动，或拖动几像素就中断。
两种可靠解法：
- 临时禁用
iframe的鼠标交互：iframe.style.pointerEvents = 'none'（拖拽开始时设，结束时恢复为auto） - 加一层透明蒙层覆盖分隔区域：
position: absolute的div覆盖交界处，设pointer-events: auto，确保拖拽事件始终落在它上面
注意：不要用 iframe 的 seamless 属性（已废弃），也不要依赖 contentWindow 注入样式——跨域时不可行，同域时也易引发 CSP 报错。
需要 JS 响应拖拽变化？监听父容器，别碰 iframe 尺寸
resize CSS 属性不会触发 resize 事件，也无法通过 offsetWidth 立即读取新尺寸。若需在拖拽后重载 iframe 内容、刷新图表或调整内部逻辑，必须用 ResizeObserver。
正确做法：
- 只观察含
iframe的那个父div（比如.left-pane），不要观察iframe自身 - 回调中用
entries[0].contentRect.width获取准确宽度，避免用offsetWidth（可能滞后） - 首次回调常发生在渲染前，建议包一层
requestAnimationFrame再读值 - 不要在回调里直接修改被观察元素的
style.width，否则可能触发循环观察
一句话收尾：能用纯 CSS resize + flex 就别写拖拽逻辑；一旦涉及 iframe，所有尺寸响应都得绕开它本身，盯紧它的容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
