Increasing size/height of OpenLayers map/canvas?

Question

I'm trying to let the Map/Canvas height of OpenLayers 100%, but I'm not able to do it.

I've already tried putting in several places the "height: 100%;" and used the "map.updateSize()" function, but without success. I already tried to use "height: 100vh;" as well, but it stretches the map instead of increasing the canvas.

I send print screen below illustrating what happens:

I would like the height of the map/canvas to be 100% on the page

That piece of code showed on the image:

<div id="map" class="olMap">
    <div class="ol-viewport" data-view="146" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">

        <canvas class="ol-unselectable" width="937" height="480" style="width: 100%; height: 100%; display: block;"></canvas>

        <div class="ol-overlaycontainer"></div>
        <div class="ol-overlaycontainer-stopevent">
        <div class="ol-zoom ol-unselectable ol-control">
        <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
        <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
        </div>
        <div class="ol-rotate ol-unselectable ol-control ol-hidden">                
        <button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button>
        </div>
        <div class="ol-attribution ol-unselectable ol-control ol-collapsed" style="display: none;"><ul></ul><button type="button" title="Attributions"><span>i</span></button>
</div>
</div>
</div>
</div>

Code where I create the map (Explore.vue):

export default {
  ...
  methods: {
    initMap: function () {
      // eslint-disable-next-line
      this.map = new Map({
        target: 'map',
        layers: [
          layerGroupBaseMap
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 5
        })
      })
    }
  },
  mounted: function () {
    this.initMap()
  },
  ...
}

Source code: https://github.com/rmmariano/executive_frontend/tree/dev-rodrigo

Does someone have any idea?