当光标在右列上方时如何滚动左列？

当我滚动地图画布时,如何向上和向下滚动左列？

Map已禁用滚轮传播,如果可能,只有CSS才能完成它.我试图#map_canvas用flex属性包装其他div并将map设置为绝对位置和100vh/vw,但它与轮泡没有区别.

$(document).ready(function() {
  var post = "
Post title
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
";
  var i = 0;
  while (i < 10) { $('#left_container').append(post); i++; }

  var options = {
    zoom: 10,
    scrollwheel: false,
    center: new google.maps.LatLng(49, 17)
  };
  var map = new google.maps.Map($('#map_canvas')[0], options);

  $("#map_canvas").scrollLeft();
});

.flexbox-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
}
.flexbox-container #left_container {
  flex: 1;
  padding: 0 5px;
  overflow-y: auto;
  height: 100vh;
}
#map_canvas {
  flex: 2;
}