垂直滚动“左”和“右” div，分别由“外包装” div和“右” div滚动至“水平”滚动-始终可见

Question

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

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

左右的高度将始终相等。并且Right Div仅需要水平滚动。 Overflow-x：滚动，并且该滚动条应始终在右侧div水平滚动条上可见。

HTML代码：

User.findByIdAndUpdate(req.session.passport.user, 
{
   $set : {
        name: req.body.name,
        email: req.body.email,
        password: req.body.password
    }
},
(err, user) => {
     // Some handle 
   }
);

CSS代码：

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

Please see the example