css实现第一列固定 垂直的滚动条可以上下滚动 横向的滚动条向右滚动时第一列不滚动

现在高度跟宽度暂时定死看效果，现实情况右边高度跟宽度会变化，导致content的高度跟宽度也会变化，左边的高度保持与右边高度一致，你看看效果，然后根据实际情况进行调整，如有帮助，请采纳

<div class="main"> 
      <div class="content">
        <div class="left">
        </div>
        <div class="right">
        </div>
      </div>
</div>

<style>
.main {
  position:relative;
  height:900px;
  width:1200px;
  box-sizing:border-box;
  overflow:auto;
}
.content {
  display:flex;
  position:relative;
  width:1500px;
  height:1200px;
}
.left {
  position:sticky;
  left:0;
  width:300px;
  height:100%;
  background:blue;
}
.right {
  width:1200px;
  height:100%;
  background:red;
}
</style>

1：左边的div必须始终保持在其起始位置水平(向左或向右滚动不会移动它)，2：左边的div必须与其旁边的div垂直滚动，3：如果存在水平溢出右边的div，它的滚动条必须始终保持在屏幕的底部

可以这样做
这个布局将分成几个部分
第一部分，是最大的一个div，里面分为两个div，一个左边left，一个右边right
左边这个div的宽度不变，且里面的内容超出宽度的时候没有横向滚动条，高度自适应
右边的div设置一个最大的宽度，这个宽度不能大于（最外层的div的宽度-左边div的宽度），超出最大宽度的时候显示滚动条（这个时候滚动条不影响左边的div）
然后最外层的div设置一个最大高度，超出最大高度时候增加滚动条，这就可以实现纵向左右一起滚动，横向只有右边滚动