Reduce Mapbox map size without cropping

Question

I would like to keep my Mapbox map content always fully visible, no matter the container's size. But when the map is very small, the map is getting cropped.

Here is an example of what I have https://codepen.io/eddydg/pen/BmReEm

When you reduce the page width, it will also reduce the map container height to keep its size ratio. But the map won't zoom out further to keep all layers visible.

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [0, 0],
    zoom: 0
});

window.addEventListener('resize', () => {
  map.zoomTo(0);
});

body {
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
}

.column {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  border: thin black solid;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 400px;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 30vw; /* 100% */
  max-width: 100%;
  max-height: 100%;
  background-color: teal;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<script src="https://www.mapbox.com/help/data/codepen-token.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js"></script>

<div class="content">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column">
    <div class="map-wrapper">
      <div id='map'></div>
    </div>
  </div>
</div>

Answer 1

I think your problem here is that in order for the map to be resized in order to keep everything in view at the tiny size in question, it would have to zoom out beyond zoom level 0. Which isn't possible. Possibly you could hack something using CSS to scale the actual rendered map with pixel ratios or something.

Answer 2

Update: this seems to have been fixed in Mapbox GL js v1.6.0-beta.1

Actually this seems to be a bug that happens when the viewport is smaller than 512px. It's pretty old and still not fixed. So as a workaround, I ended up using a rollover effect on the map:

• Mouse out of the map: increase the map size (>=512px to see the whole map) and scale it back to the original size with CSS. You will have the whole map visible (whatever its size) but all the interactions will be shifted.
• Mouse over the map: back to the origin size and scale(1) so the map will be cropped, but you will be able to properly interact with it.