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

Question

www 12 12 12 12 12 12 12 12 123 ▲
YYY 13 13 12 12 12 12 12 12 125 |
ZZZ 11 11 12 12 12 12 12 12 121 |
◀--------------------------------▶ ▼
如图所示 定位在底部的元素 遍历出n个子元素 要求垂直上下滚动条可以滚动
横向的滚动条滚动时 第一列不随着滚动

Answer 1

现在高度跟宽度暂时定死看效果，现实情况右边高度跟宽度会变化，导致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>