我的问题是这样的，我是想让父级跟随div2的宽度变化而变化但是div3的宽度改变时不能改变div1和div2的宽度
<div class="div1">
<div class="div2">div>
<div class="div3">div>
div>
该回答引用GPT:
可以在div1中设置宽度，并且设置div2和div3的宽度为百分比，这样div1的宽度就不会随div3的宽度变化而变化：
.div1 {
width: 500px;
}
.div2 {
width: 50%;
}
.div3 {
width: 50%;
}
如还有疑问，可留言帮助解决。
div3设浮动就是了
div1设置相对定位 position: relative;，div3设置绝对定位position: absolute; div3的宽度变化就不会影响div1啦。但是div3可能会向上浮动，可以使用top将div的位置留出来。
不知道你这个问题是否已经解决, 如果还没有解决的话:页面描述：左边框体为树，右边框体随着左边树节点的点击出现不同的内容
需求：由于树有多级结点，且内容较长，需要左框体可以实现拖拽变宽
难点：由于右边窗口会随着左边的树节点的点击而新增frame，导致页面的鼠标抬起事件无法传播到新增的frame，使的页面效果出现偏差
解决方案：
在新增的frame中添加鼠标抬起事件，并向主窗口发送消息
主窗口接收到消息后，自动执行原本的鼠标抬起事件。
消息传递的代码参见：
https://www.cnblogs.com/ms-grf/p/11545290.html关于鼠标的clientX参数参见：
https://www.cnblogs.com/ytraister/p/10959867.html
主框体-框架：
<!--左框体-->
<div class="div_left"" id="widthAuto">
<!--树-->
<div class="treepanel">
<ul id="treeDemo1" class="ztree"></ul>
</div>
</div>
<!--右框体-->
<div class="div_right">
<!--显示可拖拽样式的滑块-->
<div id="handle"></div>
<!--随着树结点的点击，append一个<frame>元素进去-->
<div id="mainFrame"></div>
</div>
主框体-样式：
#mainFrame{
margin-left:15px;
position:relative;
display:inline;
}
#handle {
position: absolute;
left: -8px;
top: 0;
bottom: 0;
width: 8px;
cursor: w-resize;
padding: 2px 2px;
height: 100%;
}
主框体-js代码：
var isResizing = false; //窗口宽度是否可以改变
var left = $('#widthAuto');
var right = $('#mainFrame');
var handle = $('#handle');
$(function () {
handle.on('mousedown', function (e) {
isResizing = true; //窗口宽度可以改变
});
$(document).on('mousemove', function (e) {
if (!isResizing)
return;
var width = e.clientX;
width = width<300?300:width; //最小宽度300
width = width>1000?1000:width;//最大宽度1000
left.css('width',width);
e.preventDefault(); //去除默认事件
e.stopPropagation();
}).on('mouseup', function (e) {
isResizing = false; //窗口宽度不可以改变
});
//若接受到frame窗口有鼠标抬起的消息，则设置窗口宽度不可以改变
window.addEventListener("message", function(e) {
isResizing = false;
});
});
frame框体-js代码：
$(function(){
$(document).on('mouseup', function (e) {
window.parent.postMessage({ }, '*');
});
});