How can i get Cesium to work with a flexbox layout?

Question

I have an example of the layout I am going for in this jsfiddle.

If you run that fiddle and click the Leaflet button, everything works great (works great with google too, but I cant post my api key).

If you click Cesium, it does not seem to respect the flexbox space allotted to it. Any idea how to get Cesium to behave?

Note, you may have to resize your browser a bit to show the problem

Answer 1

This is because of some strangeness with flexbox attempting to preserve the canvas' aspect ratio (needlessly, in the case of Cesium, because it will just rerender on the next frame).

Here's a workaround. Edit the top of your jsFiddle CSS to look like this:

  html {
      height: 100%;
  }
  #cesiumContainer, .leaflet-container {
      position: absolute;
      width: 100%;
      height: 100%;
  }

Then, add one new rule to your existing .app .data .map block:

  .app .data .map {
      /* keep existing rules here */
      position: relative;
  }

Here's the modified jsFiddle.

This sets up a parent/child relationship, where the parent flexbox element has gained a position: relative, which means that any "absolute" children of it will be absolutely positioned within its coordinates (making them effectively relative to it). The child in this case is #cesiumContainer, which we have now positioned absolutely, not so much to gain the absolute nature of the coordinate system, merely to gain the side effect that the sizes of absolutely-positioned elements don't contribute to the document flow around them. This means that Cesium's canvas element can't push flexbox around, it must conform to it exactly, which is what we want.