セシウムはどのようにしてフレックスボックスレイアウトで動作させることができますか？

Question

私はthis jsfiddleに行く予定のレイアウトの例を持っています。

このフィドルを実行してLeafletボタンをクリックすると、すべてがうまく動作します（はGoogleでもうまくいきますが、私のapiキーを投稿できません）。

Cesiumをクリックすると、割り当てられたフレックスボックスのスペースを尊重していないようです。どのようにセシウムを行動させるか考えていますか？

注意は、あなたが問題を表示するには、ブラウザビットのサイズを変更する必要があり

Answer 1

これは、の場合には、理由フレキシボックスが不必要（キャンバス縦横比を維持しようとするといくつかの奇妙ですセシウムは、次のフレームで再レンダリングするため）。

回避方法があります。このように見えるためにあなたのjsFiddle CSSの上部を編集します。

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

次に、既存の.app .data .mapブロックに1つの新しいルールを追加します。

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

ここmodified jsFiddleです。

親フレンドボックスの要素がposition: relativeになった親子関係を設定します。つまり、絶対的な子がすべてその座標内に絶対的に配置されることになります。この場合の子は#cesiumContainerです。絶対配置された要素のサイズがドキュメントの流れに寄与しないという副作用を得るために、座標系の絶対的な性質をあまり持たずに絶対に配置しましたそれらの周り。これは、セシウムのcanvas要素がフレックスボックスを押すことができないことを意味し、正確にそれに適合しなければなりません。これは私たちが望むものです。