html - 如何使用 css3 flexbox 将帖子列表放在左侧，将谷歌地图 Canvas 放在右侧？

Question

如何使用新的 css3 属性(例如 flexbox)将 View 拆分为两列，以便带有帖子列表的左列将溢出-y 滚动到页面底部，并映射将填充其容器并永久保留在右侧的容器边？

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

var options = {
  zoom: 10,
  center: new google.maps.LatLng(49, 17),
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

.flexbox-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.flexbox-container #left_container {
  width: 35vw;
  padding: 0 5px;
  height: 100vp;
  overflow-y: scroll;
}
.flexbox-container #map_container {
  margin-right: 0px;
}
#map_canvas {
  position: absolute;
  overflow-y: hidden;
  width: 65vw;
  height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

<div class="flexbox-container">
  <div id="left_container"></div>
  <div id="map_canvas"></div>
</div>

Answer 1

试试这个 DEMO

HTML

<div class="flexbox-container">
  <div id="left_container">
    <div class="container-content">

    </div>
  </div>
  <div id="map_canvas"></div>
</div>

CSS

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

.container-content {
  overflow-y: auto;
  height: 100vh;
}

.flexbox-container #map_container {
  margin-right: 0px;
}

#map_canvas {
  flex: 2;
}