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.