Cesium doesn't fill div in React app

CesiumJS
1

We can’t figure out why the Cesium viewer doesn’t fill the container. We want the viewer to fill the middle-right grid cell. The blue background fills the rest of the cell.

image
image1920×1257 107 KB

and the code:

const SimulationBuilder = () => {
  return (
    <div className='sim-builder'>
      <SmallHeader style={{ gridRow: 1 }} />
      <SmallHeader className='small-header' />
      <div className='sim-viz'>
        <div style={{backgroundColor: 'blue', width:'100%', height:'100%'}}>
          <CesiumViewer style={{width:'100%', height:'100%'}}/>
        </div>
      </div>
      <div className='sim-sidebar'>
        <div className='sim-platforms'>Available Platforms</div>
        <div className='sim-platforms'>Used Platforms</div>
        <div className='sim-properties'>Properties Editor</div>
      </div>
      <div className='sim-footer'>Footer</div>
    </div>
  )
}

and the CSS:

.sim-builder {
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 36px 1fr 42px;
  width: 100vw;
  height: 100vh;
  margin: auto;
}

.small-header {
  grid-column: 1 / 3;
  grid-row: 1;
}

.sim-viz {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid white;
}

.sim-sidebar {
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  display: flex;
  flex-flow: column;
}

.sim-sidebar > .sim-platforms {
  flex: 1 1 auto;
  border: 1px solid white;
}

.sim-sidebar > .sim-properties {
  flex: 0 1 256px;
  border: 1px solid white;
}

.sim-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  border: 1px solid white;
}

Thanks!