How do I select the inner <div> containing an ID?

In the markup below, I want to set the container property of the MapView to the <div> with an Id = "viewDiv". When I remove the outer <div> with the Id = "container" everything works and a map appears. When I run using the outer container <div>, the map does not appear. How do I set the container property to the inner <div>?

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Get started with MapView - Create a 2D map</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://js.arcgis.com/4.3/"></script>
    <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView){
      var map = new Map({
        basemap: "national-geographic"
      });
      var viewNode = document.getElementById("viewDiv");
      
      var view = new MapView({
        container: viewNode,  // Reference to the scene div created in step 5
        map: map,  // Reference to the map object created before the scene
        zoom: 4,  // Sets the zoom level based on level of detail (LOD)
        center: [15, 65]  // Sets the center point of view in lon/lat
      });
    });
    </script>
    </head>
    <body>
    	<div id="container">
    		<div id="viewDiv"></div>
    	</div>
    </body>
    </html>

Solution

The reason it works if you remove the outter div is because the inner div has a height of 100% of the window. But with the outter div the the inner div has a height of 100% of nothing (the height specified for the outter div). So give the outter div a height.

#container {
  height: 100%
}