Esri Oceans Basemap fullwidth

I am using in my project the Esri Ocean Basemap. I use the fullscreen control to enlarge it, but when enabled the map is not covering the whole screen.

The HTML structure is as follows:

<div id="full-size-container-custom" class="full-size-container-custom">
 <div class="map-container">
  <div id="map" class="map"></div>
 </div>
 <div id="sidebar-map-container" class="sidebar-map"></div>
</div>

The controls are loaded as

var map = new ol.Map({
    target: 'map',
    layers: [],
    controls: ol.control.defaults().extend([
        new ol.control.Zoom(),
        new ol.control.Attribution(),
        new ol.control.ZoomSlider(),
        new ol.control.MousePosition({
          projection: mercatorProjection,
            coordinateFormat: function (coordinate) {
                return 'Coordinates: ' + 'Lat ' + ol.coordinate.format(coordinate, '{y}', 3) + ' Long ' + ol.coordinate.format(coordinate, '{x}', 3);
            },
            target: 'coordinates'
        }), 
        new ol.control.ScaleLine(),
        new ol.control.FullScreen({source:'full-size-container-custom'}),
        new app.Legend()
    ]),
    view: view         

And the CSS is

.full-size-container-custom {
margin-bottom: 10px;
width: 100%;
height: 100%;
position: relative;
}
.full-size-container-custom:-moz-full-screen {
 height: 100%;
 background-color: #fff;
}
.full-size-container-custom:-webkit-full-screen {
  height: 100%;
 background-color: #fff;
}
.full-size-container-custom:-ms-fullscreen {
  height: 100%;
  background-color: #fff;
 }
.full-size-container-custom:-fullscreen {
 height: 100%;
 background-color: #fff;
}
map-container {
height:100%;
width: 80%;
padding: 0 0 0 0;
float:left;
}
.sidebar-map {
width: 19%;
height:100%;
padding: 0 0 0 1%;
float:left;
}
.map{
width: 100%;
height: 100%;
}
.map {
position: relative;
}

The aspect of the map can be seen in the following two screenshots. Do you have any suggestion?

Map in normal view

Map in fulscreen

map.on('change:size', function() {
  var maxRes = ol.extent.getHeight(map.getView().getProjection().getExtent())/map.getSize()[1];
  map.getView().setMinZoom(map.getView().getZoomForResolution(maxRes));
});