Cesium container inside of multiple divs

CesiumJS
1

My project needs to use Cesium to show geospatial data so I started to play with it. I tried helloworld.html and everything looks just fine. However when I wrapped cesiumContainer div within another div, the globe doesn't take the whole screen anymore. Does CesiumContainer has to be on the top div under <body>? Our application has a separate panel for Cesium stuff so it can't the top div. I really don't understand why adding another div makes cesium not adjust to screen anymore. The following is my code. As you can see, the only changes I'v made is to add <div> around cesiumContainer and this extra div caused Cesium to take only 1/3 of the screen instead of whole screen. Please help!

<body>
  <h1>HELLO WORLD</h1>
  <div>
      <div id="cesiumContainer"></div>
  </div>
    
    <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

2

Here's my experiance (i solve that using css):

.html
<!-- some code>
</div>
<div id="cesiumContainer">
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</div>
<!-- some code>.

.css
#cesiumContainer {
    width:90%;
    height: 100%;
    float:left;
}