我如何獲得銫使用flexbox佈局？

Question

我有一個this jsfiddle的佈局示例。

如果你運行那個小提琴並點擊Leaflet按鈕，一切都很好（與谷歌也很好，但我不能發佈我的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。

這建立了父/子關係，其中父彈性盒元素已獲得position: relative，這意味着它的任何「絕對」子元素都將被絕對定位在其座標內（使其與其有效地相關）。在這種情況下，孩子是#cesiumContainer，我們現在已經絕對定位了，而不是爲了獲得座標系的絕對性質，僅僅是爲了獲得絕對定位元素的大小不會對文檔流造成影響的副作用在他們旁邊。這意味着Cesium的canvas元素不能推動Flexbox，它必須完全符合它，這正是我們想要的。