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

Question

我只需要一个纯 CSS 解决方案，不需要 Jquery 或 Java 脚本。您的帮助将不胜感激。

Wrapper div 将具有带有垂直滚动的 View 高度（它将滚动左右 div 以垂直滚动）。

Left 和 Right 的高度将始终相同地增长。而右 div 只需要水平滚动。溢出-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>

CSS 代码：

    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;
}

请看例子

标签： csshorizontal-scrollingvertical-scrolling