title: Mapbox-gl height 100%
body: <p>Mapbox doesn't fit to it's container. whay not?</p>
  
  <p>This is the rendered html:</p>
  
  <pre><code>&lt;div class="map mapboxgl-map" id="mapBox"&gt;
    &lt;div class="mapboxgl-canvas-container"&gt;
      &lt;canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277"&gt;
      &lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>those <code>277px</code> are the default I guess.</p>
  
  <p>this is the js:</p>
  
  <pre><code>mapboxgl.accessToken = 'blabla';
    var map = new mapboxgl.Map({
      container: 'mapBox',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    });
  </code></pre>
  
  <p>this is the scss:</p>
  
  <pre><code>.map {
    grid-column: 1/-1;
    height: 100%;
    position: relative;
    canvas, .mapboxgl-canvas {
      height: 100%;
    }
  }
  </code></pre>
  
  <p>If I add the ever so famous <code>!important</code> to the <code>height: 100%;</code> then it works but the map is stretched.</p>
  
  <p>How do I have to do this?</p>