Css 通过外包装div垂直滚动左右div，并将右div滚动到水平滚动-始终可见

我只需要一个纯CSS解决方案，没有Jquery或Java脚本。谢谢你的帮助

包装器div将有一个垂直滚动的视图高度（它将滚动左侧和右侧div以垂直滚动）

左侧和右侧的高度将始终相等。右边的Div只需要水平滚动。Overflow-x：滚动，在右div水平滚动中应始终可见

HTML代码：

    <div class="main_wrap" style="padding-top:10px;">


        <div class="left">
              <!-- loop -->
              <div class="each_cell">
                <p>1</p>
              </div>

              <div class="each_cell">
                <p>2</p>
              </div>

              <div class="each_cell">
                <p>3</p>
              </div>

              <div class="each_cell">
                <p>4</p>
              </div>

              <div class="each_cell">
                <p>5</p>
              </div>

              <div class="each_cell">
                <p>6</p>
              </div>

              <div class="each_cell">
                <p>7</p>
              </div>

              <div class="each_cell">
                <p>8</p>
              </div>

              <div class="each_cell">
                <p>9</p>
              </div>

              <div class="each_cell">
                <p>10</p>
              </div>
              <!-- loop -->          
        </div>



        <div class="chatRooms">

              <div class="each_cell">
                  <div class="render_box">
                    Box
                  </div>
              </div>

              <div class="each_cell">
                <p>2</p>
              </div>

              <div class="each_cell">
                <p>3</p>
              </div>

              <div class="each_cell">
                <p>4</p>
              </div>

              <div class="each_cell">
                <p>5</p>
              </div>

              <div class="each_cell">
                <p>6</p>
              </div>

              <div class="each_cell">
                <p>7</p>
              </div>

              <div class="each_cell">
                <p>8</p>
              </div>

              <div class="each_cell">
                <p>9</p>
              </div>

              <div class="each_cell">
                <p>10</p>
              </div>

        </div>

</div>

---

是否要在外部div上进行水平滚动？我没听清你的问题我试了很多这有点复杂。。。不，我不想要外包装的水平Div。但我需要它的内部Div，这是正确的Div水平滚动，这将有一个很长的宽度。。。。。垂直滚动时，左、右div都应垂直滚动。请参阅所附的示例图像。现在的逻辑是存在的，问题是当我垂直滚动右div水平滚动被覆盖。我希望它总是可见的。我认为这种情况不可能与纯css。若您需要显示水平滚动，那个么您需要将溢出属性设置为子级。但在这种情况下，它将不会滚动左侧部分。您将需要创建两个滚动条，当右滚动条或左滚动条改变位置时，您将需要移动，反之亦然。我不会建议你做这种改变你的好伴侣。。。我精通UI/UX，但谦虚地问是否有人知道我错过了哪些。我尝试了所有的方式，甚至在SASS中，但这是不可能的。所以我确实使用了Jquery:$（'.mydiv'）.scroll（函数（）{$（this.find（'.fixedaxisy'））.css（'left'，$（this.scrollLeft（））；}）；这起作用了。。。感谢大家花时间回答。

    p{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:19px !important;
    margin-bottom:9px !important;
    text-decoration:none !important;
}

.each_cell{
  background:black;
  width:100%;
  height:39px;
  float:left;
  margin-bottom:3px;
}

.main_wrap {
    width:80%;
    background-color: #fff;
    border: solid 1px #a0b5ba;
    min-height: 100%;    
    height: 80vh;    
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    float:left;
    position: relative;
}

.left {
    background:red;
    width: 89px;
    text-align: center;
    position: absolute;
    z-index: 100;
}


.chatRooms{
    left:90px;
    width:100%;
    float:left;
    position: relative;
    overflow-x: scroll;
    white-space: nowrap;
}

.render_box{
  background:red;
  width:100px;
  height:20px;
  left:1500px;
  position:relative;
}