Openlayers 3 在 flexbox 列布局中调整大小？答案

【问题标题】：Openlayers 3 resizing in flexbox column layout?Openlayers 3 在 flexbox 列布局中调整大小？
【发布时间】：2015-06-26 08:29:26
【问题描述】：

是否无法让 openlayers 3 地图在 flexbox 列布局中正确调整大小？

我有一个非常简单的 flexbox 列“容器”，有两行，似乎 openlayers 大小更新总是将其高度计算为整个页面高度，从而导致出现垂直滚动条。

<style>
  .container {
     display: flex;
     flex-direction: column;
  }

  .row {
     flex: 1 1 auto;
  }

  #map {
     flex: 0 0 none;
  }
</style>

</head>

<body ng-controller="AppCtrl">
  <div class="container">
    <div class="row">NAV BAR</div>
    <div id="map" class="map"></div>
  </div>
 ...

一个例子可以在这里找到http://codepen.io/cmadsen/full/zGpYjQ/

【问题讨论】：

标签： css flexbox openlayers-3

【解决方案1】：

试试这个：

html, body {
  margin: 0;     /* Remove margins */
  height: 100%;  /* Fill the window */
}
.container {
  height: 100%;  /* Fill the window */
  display: flex; /* Magic begins */
  flex-direction: column;
}
#map {
  min-height: 0; /* Let the content overflow */
  flex: 1;       /* Fill the available space */
}

var app = angular.module('StarterApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
    })
  });
  var map = new ol.Map({
    layers: [rasterLayer],
    target: document.getElementById('map'),
    view: new ol.View({
      center: ol.proj.transform([11, 55.8403], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    }),
    controls: ol.control.defaults().extend([
      new ol.control.ScaleLine()
    ])
  });
}]);

@import 'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css';
html, body {
  margin: 0;
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#map {
  min-height: 0;
  flex: 1;
}

<body ng-controller="AppCtrl" ng-app="StarterApp">
  <div class="container">
    <div class="row">NAV BAR</div>
    <div id="map" class="map"></div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol-debug.js"></script>
</body>

【讨论】：

以上在 Firefox 中有效，但在使用 google chrom 版本 45.0.2438.3 时我仍然得到垂直滚动条