How to make content fit the full screen (Mapbox) - css

Question

I'm using a map api (Mapbox). I'm trying to make the map fit the full screen, but nothing I try seems to work.
I have a wrapper and container for the map. I've tried to different solutions, but I'm still having problems.
Option 1: problem: the map doesn't fit the viewport, instead a scroll bar is added forcing the user to scroll down to view the entire map
jsfiddle #1
Option 2: problem: the map fills the entire viewport, but the bottom portion of the map is cut off (notice the mapbox logo is missing at the bottom)
jsfiddle #2
How can I get the map to fit the view port without being cutoff or adding a scroll bar?
Full code for reference:
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
class Application extends React.Component {
componentDidMount() {
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [13.392, 52.523], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
}
render() {
return (
<div>
<h2>Hello</h2>
<p>Hi</p>
<div className="map-wrapper">
<div ref={this.mapContainer} id="map"/>
</div>
</div>
)
}
}
ReactDOM.render(<Application/>, document.getElementById('app'));
body, html {
height: 100%;
}
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100% !important.
}
<div id="app"></div>

Answer 1

No need for the wrapper. Simply set your height and width to 100vh and 100vw respectively.
#map {
width: 100vw;
height: 100vh;
}