Javascript 如何像windows资源管理器一样并排调整两个div的大小

嗨 我必须创建一个页面，使RightCol的大小必须像windows资源管理器窗口一样可调整。 每列的大小必须等于浏览器的高度。 通过调整浏览器的大小，必须调整这两列的大小

我的代码不能正常工作。请给我来一杯好吗

/**jquery：**/
$（“#LeftCol”）。可调整大小({
最大高度：250，
最大宽度：900，
身高：150，
最小宽度：200
});
$（'#LeftCol'）。调整大小（函数（）{
$（“#右列”）.width（$（“#父项”）.width（）-$（“#左列”）.width（）；
});
$（窗口）。调整大小（函数（）{
$（“#右列”）.width（$（“#父项”）.width（）-$（“#左列”）.width（）；
$（“#LeftCol”）.height（$（“#parent”）.height（））；
});

#母公司{
位置：相对位置；
最小高度：300px；
保证金：0；
填充：0；
宽度：100%；
}
#左撇子{
位置：相对位置；
浮动：对；
最小高度：400px；
宽度：65%；
背景色：#A2A；
溢出：自动；
}
#RightCol{
位置：相对位置；
浮动：对；
最小高度：400px；
宽度：35%；
背景色：#BBB；
溢出：自动；
最大高度：300px；
}

使用纯css Flexbox布局的解决方案
我将其中一个设置为可调整大小，另一个设置为flexbox


我拿了一件已经给过我的衣服，在这支笔里试了试。作出了一些调整

HTML

它需要在哪些浏览器中工作？如果不需要高度的向后兼容性，您可以看看flex box。现代浏览器和ie9。jQuery不是一种语言，也不是一种标准。这是一个图书馆，一个工具。你的“代码”是用JavaScript编写的。唉，ie9不支持flexbox。如果ie10支持它，我可以忽略ie9。这是可行的，但当你试图调整它的大小时，为什么它会跳到右边？
<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

#parent{
  display: flex;
  border: 1px solid #000;
  height: 100vh;
}
#LeftCol{
  flex-grow: 3;
  border: 1px solid red;
}
#RightCol{
  flex-grow: 1;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>

#parent{
  display: flex;
  border: 1px solid #000;
  height: 75vh;
  width: 100%;
}
#LeftCol{
  flex-grow: 1;
  border: 1px solid red;

  resize: horizontal;
  overflow: auto;
}
#RightCol{
  flex-grow: 3;
  border: 1px solid red;
}