Как я могу заставить Цезий работать с макетом flexbox?

Question

У меня есть пример макета, который я собираюсь сделать в this jsfiddle.

Если вы запустите эту скрипку и нажмите кнопку Leaflet, все будет отлично (отлично работает с Google, но я не могу разместить свой ключ api).

Если вы нажмете Cesium, он, похоже, не уважает выделенное ему пространство flexbox. Любая идея, как заставить Цезию себя вести?

Обратите внимание, возможно, придется изменить размер вашего браузера немного, чтобы показать проблему

Answer 1

Это происходит из-за какой-то странности с Flexbox пытается сохранить соотношение сторон холста (без необходимости, в случае Цезий, потому что он будет просто переходить на следующий кадр).

Вот обходной путь. Изменение верхней части вашего jsFiddle CSS, чтобы выглядеть следующим образом:

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

Затем добавьте одно новое правило к существующему .app .data .map блока:

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

Вот modified jsFiddle.

Это устанавливает родительское/дочернее отношение, в котором родительский элемент flexbox получил position: relative, что означает, что любые «абсолютные» его дети будут абсолютно расположены в пределах своих координат (что делает их эффективно по отношению к нему). Ребенок в этом случае - #cesiumContainer, который мы теперь позиционировали абсолютно, не столько для того, чтобы получить абсолютный характер системы координат, просто для того, чтобы получить побочный эффект, чтобы размеры абсолютно позиционированных элементов не вносили вклад в поток документа вокруг них. Это означает, что элемент C цезия canvas не может выталкивать flexbox вокруг, он должен точно соответствовать ему, что мы и хотим.